How to Select Chips Dynamically Other Than Using Index

The Chips component has a property called selectedChips, which allows us to select an item based on its index. To select a chip other than using index, you can use the select method of the Chips component. In this method, we need to pass either the chip item or its index as a parameter.

Please refer to the provided code sample.

<template>
 <div class="control-section chip-default">
   <h4>Chips component</h4>
   <ejs-chiplist id="chip" ref="chipObj" selection="Single" :created="onCreated">
     <e-chips>
       <e-chip text="Chai" value="111"></e-chip>
       <e-chip text="Chang" value="222"></e-chip>
       <e-chip text="Aniseed Syrup" value="333"></e-chip>
       <e-chip text="Ikura" value="444"></e-chip>
     </e-chips>
   </ejs-chiplist>
 </div>
</template>

<script>
import {
 ChipListComponent,
 ChipDirective,
 ChipsDirective,
} from '@syncfusion/ej2-vue-buttons';

export default {
 components: {
   'ejs-chiplist': ChipListComponent,
   'e-chip': ChipDirective,
   'e-chips': ChipsDirective,
 },
 methods: {
   onCreated: function (e) {
     var item = document.querySelector("[data-value='444']");
     this.$refs.chipObj.select(item);
   },
 },
 data: function () {},
};
</script>

Refer to the below link for the sample,
Vue chips selection