JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<script
  type="module"
  src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.esm.js">
</script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.js">
</script>
<body>
<div id="wrapper" 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" :key="group.id" :value="group.id">{{ group.name }}</fw-select-option>
						</fw-select>
					</div>

					<div class="form-group flex-row">
						<fw-select label="Agent" required="true" placeholder="Assign to Agent" :key="rerender">
							<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="agent.id" :value="agent.id">{{ agent.name }}</fw-select-option>
						</fw-select>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

JavaScript

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    new Vue({
    name: 'select',
      el: '#wrapper',
      data: {
        groups: [],
        agents: [],
        rerender: 1,
      },
      async mounted() {
      this.$refs.ticketGroupSelect.addEventListener("fwChange", this.onGroupSelectChange);
      this.groups =	await this.getGroups();
      },
      
      methods: {
      async getGroups() {
      return [{
        id: 1,
        name: 'sample'
        },
        {
        id: 2,
        name: 'sample2'
        },
        {
        id: 3,
        name: 'sample3'
        }]
      },
      
      async onGroupSelectChange(ev) {
      console.log(ev.target.value);
      this.agents = await this.getAgents(ev.target.value);
      this.rerender = this.rerender + 1;
      },
      
      async getAgents(id) {
      	return [{
        id: 5,
        name: 'john'
        },
        {
        id: 6,
        name: 'doe'
        }]
      }
      }
    });
  }
}