Show data in edit field using laravel inertia and tagify from metronic8

I am trying to show the data of a field "work_places" in edit form, this filed is Tagify and I store the value in json filed.

this is how the data is stored in the database cell after making json_encode: ["test1","test2", "test3"]

and that's how I try to show the value in the edit form:

<div class="col-lg-8">
<label class="fs-6 form-label fw-bolder text-dark">Work Places</label>
<input class="form-control" id="work_places"/>
<div v-if="form.errors.work_places" v-text="form.errors.work_places" class="text-danger text-xs mt-1"></div>
</div>


<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
import {onMounted, useAttrs} from "vue";

const attrs = useAttrs();

let props = defineProps({
jobs_list: Object,
});


let form = useForm({
name: props.jobs_list.name,
work_places: JSON.parse(props.jobs_list.work_places),
is_active: props.jobs_list.is_active,
});


let submit = () => {
form.put('/constants/jobs-list/' + props.jobs_list.id);
}
onMounted(() => {
var workPlacesInput = document.querySelector("#work_places");
new Tagify(workPlacesInput, {
whitelist: form.work_places.map(wp => ({ value: wp })),
});
workPlacesInput.addEventListener('change', (e) => {
form.work_places = JSON.parse(e.target.value).map(tag => tag.value);
});

});
</script>


but it does not work for me. also I tried different ways to parse map the value, like:

work_places: JSON.parse(props.jobs_list.work_places).map(place => ({ value: place })),

Continue reading...