title: CakePHP 3 and VueJS - use v-model to set default Form's selectbox
body: <p>I'm using CakePHP <code>Form</code> helper to create form input fields. When a user edit an item, it will pre-fill the fields with data. I use v-model on each input field to make sure data is correctly populated.</p>
  
  <p>It's all good for the textboxes as data is bound correctly. But for <code>&lt;select&gt;</code> fields, v-model doesn't seem to work. I've tried using default property for the Form->input() but no help. Here's some code:</p>
  
  <pre><code>&lt;div class="fields"&gt;
      &lt;?= $this-&gt;Form-&gt;input('email', [
          'label' =&gt; __('Email'),
          'type' =&gt; 'email',
          'v-model' =&gt; 'emailModel',
          'placeholder' =&gt; __('Required'),
          '@keydown.enter.stop.prevent' =&gt; 'return false;',
          '@keyup.enter.stop.prevent' =&gt; 'onSubmit()'
      ]); ?&gt;
      &lt;?= $this-&gt;Form-&gt;input('status', [
          'label' =&gt; __('Status'),
          'type' =&gt; 'select',
          'default' =&gt; '{{userStatus}}',
          'options' =&gt; [
              1 =&gt; 'Active',
              2 =&gt; 'Inactive'
          ],
          '@keydown.enter.stop.prevent' =&gt; 'return false;',
          '@keyup.enter.stop.prevent' =&gt; 'onSubmit()'
      ]); ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>email</code> textbox has correct data filled, but not for the <code>status</code> selectbox. But if I replace <code>{{userStatus}}</code> with, for example, <code>2</code>, it will set the default option to <code>Inactive</code>, even though <code>{{userStatus}}</code> itself has value <code>2</code>.</p>
  
  <p>How do I go about solving this?</p>