Laravel Inertia结合Metronic8 Tagify无法在编辑框回显数据

我需要在编辑表单中回显work_places字段的数据，该字段使用Tagify组件实现，数据在数据库中以JSON格式存储（存储内容示例：["test1","test2", "test3"]）。我编写了对应的Vue组件代码，但尝试了多种解析映射方式，均无法正常显示数据。

模板代码 #

<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>

已尝试的无效解析映射方式 #

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

// 方式2
whitelist: form.work_places.map(wp => wp.value),

内容的提问来源于stack exchange，提问作者khaled amoudi