I'm using twig with vue.js and I need to render dynamic form dependent on fields list returned from twig. Main problem here is that I cant pass fields list in Vue.js script and need to set default value from html

Input looks like this( {{ }} is twig brackets, not vue.js)

id="{{ id }}_input"
class="{{ id }}_input {{ type }}_input"
label="{{ label ?? null}}{{ meta.required ? " *" : null }}"
name={{ name }}
value={{ default ?? null }}
v-model="inputs['{{ id }}']"

I tried to do something like this

:inputs['{{id}}'] = "{{ default }}"

:inputs.{{id}} = "{{ default }}"

With no success. I also tried to map inputs keys on mount and get input values with document.getElementById, but inputs variable is always empty. Also I tried to get all form inputs on mount like this

 this.$el.querySelectorAll('input')

but in such case input value is always empty.

At this moment I'm using this hack, but this is absolutely awful imo, is there any other way to do it?

input

tmpValue="{{ default ?? null }}"

Vue.js

mounted() {
  this.$el
      .querySelectorAll('input')
      .forEach(input => {
          input.value = input.getAttribute('tmpValue')
          input.dispatchEvent(new Event('input'))
      });
}