Vue.js - How to bind to form elements generated after page load?

Question

I have form elements aren't available in the html document until an inline script runs on page load. How to I bind to these form elements in Vue.js after the page loads? Obviously with jQuery I could do a $('.element').each(), but what is the 'Vue way'? I need to set the valueattribute of the hidden inputs.

<form>
    <input type="hidden" name="AST_Goals__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
    <input type="hidden" name="Perception_of_AppSec_program__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
</form>

Answer 1

The answer for me was to call the MktoForms2.loadForm() function in the js file, not within <script> tags in the html file. You can't bind vue elements within inline <script> tags.

Answer 2

You might not need to access the DOM in this case...

Based on the Marketo docs that show an example of setting a hidden field's value, you could use form.vals() in the MktoForms2.loadForm()'s callback:

MktoForms2.loadForm('//app-ab00.marketo.com', '785-UHP-775', 1057, form => { 
  form.vals({
    AST_Goals__c: 'my goal',
    Perception_of_AppSec_program__c: 'my perception'
  })
})