I made this using vue-cli. I have a component called InputField, and I render and mount the component to #app. I know that it will inject the component to the app, but how can I get the "default" value in index.html and access it in InputField.vue? I've tried to add props: "default" but the default value is undefined.

The idea is to get the default value from the component in html and save it to values in data when component is mounted.

I added the following ... ... to my html but seems like it wont work in vue-cli?

Also in my template I added default="def" like this:

<input default="def" v-model="values" name="my-input" />

But when I refer to "default" in js it is undefined.

InputField.vue

<template>
<div >
    <input default="def" v-model="valuess" name="my-input" />
    
<input
      v-model="message"
      type="text">
      <h2 class="message">{{ message }}</h2>

</div>
</template>

<script>
    module.exports={
        name:'InputField',
        props:["default"],
        mounted(){

             console.log(this.default);
               this.valuess=this.default;
        },
        updated(){
            if(this.valuess===this.default){
                return this.$emit('dirty-field',false);
            }
            this.$emit('dirty-field',true);
        },
        data: function () {
            return {
                valuess: '',
                message:'heelo',
               
            }
        
    }
    }
</script>

index.html

<div id="app">
    <InputField default="My default text"></InputField>
   
    </div>

main.js

new Vue({

render: h => h(InputField),
}).$mount('#app');