Controleur:

activity_json = $this->serializer->serialize($activity, 'json', []);

return render('@ChillActivity/...', [
  'activity' => $activity,
  'activity_json' => $activity_json
])


{# template twig de activity #}

{{ form(activity) }}

{% block js %}
<script>
{# window.activity = {{ activity_json|e('json') }}; #}
window.activity = {
  "type": "activity",
  "persons": [
    { type: person, id: xxx, ...}
    { ...}
  ],
  ""
};
</script>
{{ encore_entry_script_tags('activity_form') }}
{% endblock %}


{# -----
   dans le fichier app.js: #}
<script type="text/javascript">



const store = createStore({
   strict: debug,
   state(): return {
     activity: window.activity
   },
   getters: {

   },
   mutations: {
      addPerson(state, payload) {

      }
   },
   actions: {
      addPerson() {
        let el = document.getElementById('form['activity']['xxx']['xxxx']');
        let option = document.createElement('option');
        option.value = person.id;
        el.appendChild(option);
        commit('addPerson', payload)
     }
  }
});

const i18n = _createI18n(appMessages);

const app = createApp({
   template: `<app></app>`,
})
.use(store)
.use(i18n)
.component('app', App)
.mount('#activity');


</script>