Load default value from HTML input to vue.js data

So I found a way to get this done using the beforeMount() hook.

Assuming this HTML:

<div id="coupon-code">
    <input ref="coupon" v-model="coupon" value="99PI_ORG" />
</div>

This Javascript should get the job done:

  new Vue({
    el: '#coupon-code',
    data: {
      coupon: ''
    },
    beforeMount: function() {
      this.coupon = this.$el.querySelector('[ref="coupon"]').value;
    }
    // methods and such here.
  }
});

I ended up using the beforeMount() hook after some trial an error. Some things I've learned which may be relevant:

• this.$refs does not exist in the created() hook.
• this.$refs.coupon.value returns an empty string in the mounted() hook.
• The ref attribute of an element is deleted before the mounted() hook, so something like this.$el.querySelector('input[ref=coupon]') does not work.
• You can use this.$el.querySelector('input[data-ref=coupon]').attributes['value'].value inside mounted(), but this seems worse to me than using beforeMount().

If anyone has suggestions on how to do this better, I'm very open to feedback. This solution still feels sub-optimal to me.

<input  name="coupon"  v-model="coupon" value="def val">    

window.app = new Vue({
    el: '#xxx',
    data: {
       coupon: document.querySelector("input[name=coupon]").value
    }
    ...
});

In your jsfiddle you are using v-model, so in your data() you just have to set your desired value

Edit: updated code to use v-bind

new Vue({
    el: '#app',
    data: {
            coupon: 'You value here',
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>

<div id="app">
  <input id="coupon" type="text" name="coupon" :value="coupon" />
</div>