Vue 3 with Crayons select issue

Hi, I’m having troublke trying to use a dynamically rendered fw-select with Vue 3.

I have 2 selects, one is rendered once from a list of groups that is received in a syncrounose way after the component is done with the async setup,
and another select that should be updated based on the selection of the first select.

When I use normal selects for the second select this setup works fine, but with fw-select I am getting the following error in the browser console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
    at insert (runtime-dom.esm-bundler.js:160:16)
    at mountElement (runtime-core.esm-bundler.js:4760:9)
    at processElement (runtime-core.esm-bundler.js:4689:13)
    at patch (runtime-core.esm-bundler.js:4609:21)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5412:21)
    at patchChildren (runtime-core.esm-bundler.js:5295:17)
    at processFragment (runtime-core.esm-bundler.js:5000:17)
    at patch (runtime-core.esm-bundler.js:4605:17)
    at patchBlockChildren (runtime-core.esm-bundler.js:4920:13)
    at patchElement (runtime-core.esm-bundler.js:4828:13)

I am new to Vue in general, have previously worked with Angular so this is very different to me.
No idea how to resolve this, I would hate to have to drop crayons to get this working, hoping someone could point me in the right direction.
I was thinking this might have to do with the way crayons takes the template inside fw-select and injects it into the slot, but I do not know enough to figure this out,
Thinking maybe there is a way to have the entire fw-select rerender when component agents variable is changed.

Hope someone can / is willing to help

Small component reproduction, style omitted:

	<div class="wrapper">
		<div class="component">
			<div id="ticket-details-group" class="group">
				<div id="ticket-details-subgroup" class="form-group flex flex-row subgroup" ref="ticketDetailsSubgroup">
					<div class="form-group flex-row">
						<fw-select label="Group" required="true" placeholder="Assign to Group" ref="ticketGroupSelect">
							<fw-select-option value="-1" selected="true"> (Dont Change) </fw-select-option>
							<fw-select-option value="0"> -- </fw-select-option>
							<fw-select-option v-for="group in groups" :value="">{{ }}</fw-select-option>

					<div class="form-group flex-row">
						<fw-select label="Agent" required="true" placeholder="Assign to Agent">
							<fw-select-option value="-1" selected="true">(Dont Change)</fw-select-option>
							<fw-select-option value="0"> -- </fw-select-option>
							<fw-select-option v-for="agent in agents" :key="" :value="">{{ }}</fw-select-option>

import FollowupService from "../services/FollowupService";

export default {
	name: "Comp",
	methods: {
		async onGroupSelectChange(event) {
			this.selectedGroup =;
			this.agents = await this.FollowupService.getAgents(this.selectedGroup);
	async setup() {
		return {
			FollowupService: await FollowupService,
	data() {
		return {
			groups: this.FollowupService.getGroups(),
			agents: this.FollowupService.getAgents(),
	mounted() {
		this.$refs.ticketGroupSelect.addEventListener("fwChange", this.onGroupSelectChange);

Small service reproduction:

import FreshdeskService from "./FreshdeskService";

export default (async () => {

    // Freshdesk Service mouunted is resolved after the required data is resolved (domain, loggedin user, etc);

    await FreshdeskService.mounted();

    const groups = await FreshdeskService.freshdeskRequest(`groups`);

    const agents = await FreshdeskService.freshdeskRequest(`agents`);

    return {

        getGroups() {

            return groups;


        async getAgents(groupId = null) {

            // some async code to get agents based on selected group

            // result has been checked and return value is ok




Hi @EmanuelKedmi,
Good day, Welcome to the community!

Please find the below-working fiddle for your reference,

Find this reference for reloading the component

I hope it helps :slight_smile:



Hi Santhosh,

thank you kindly for the advise, what did the tricket was your :key=“rerender” on the agent fw-select.
though I have instead set it to the selectedGroup as it seemed more fitting.

Appriciate your assistance greatly!


This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.