title: How to use v-model with nested properties in Vue.js
body: <p>I have created a form and I'm trying to understand how to use v-model with nested properties in Vue.js</p>
  
  <p>This is the code for my template, as you can see I'm trying to reference the nested properties like so: <strong>form.dobDate</strong>, but how do I reference the properties (<strong>dobDate</strong>, <strong>dobMonth</strong> and <strong>dobYear</strong>) in <strong>mounted</strong> and <strong>watch</strong>? So that whatever I type remains there on page refresh?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-form novalidate&gt;
        &lt;b-form-select name="dobDate" id="dobDate" v-model="form.dobDate" :options="optionsDays"&gt;&lt;/b-form-select&gt;
  
        &lt;b-form-select name="dobMonth" id="dobMonth" v-model="form.dobMonth" :options="optionsMonths"&gt;&lt;/b-form-select&gt;
  
        &lt;b-form-input
          placeholder="Year of Birth"
          required
          autofocus
          class="form-control"
          name="year"
          id="year"
          min="0"
          max="2003"
          type="number"
          v-model="form.dobYear"
        &gt;&lt;/b-form-input&gt;
  
        &lt;input type="text" v-model="name" /&gt;
  
        &lt;b-button type="submit" variant="primary"&gt;Submit&lt;/b-button&gt;
      &lt;/b-form&gt;
      &lt;b-card class="mt-3" header="Form Data Result"&gt;
        &lt;pre class="m-0"&gt;{{ form }}&lt;/pre&gt;
      &lt;/b-card&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here is script code:</p>
  
  <pre><code>&lt;script&gt;
  export default {
    data() {
      return {
        name: "",
        form: {
          dobDate: {
            selected: ""
          },
          dobMonth: {
            selected: ""
          },
          dobYear: "",
          name: ""
        },
        optionsMonths: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        show: true
      };
    },
  
    mounted() {
      if (localStorage.name) {
        this.name = localStorage.name;
      }
    },
    watch: {
      name(newName) {
        localStorage.name = newName;
      },
      deep: true
    },
  
    computed: {
      optionsDays() {
        return Array.from(Array(31).keys());
      }
    },
  
    methods: {
      onSubmit(evt) {
        evt.preventDefault();
        alert(JSON.stringify(this.form));
      },
      getDates() {
        return Array.from(Array(31).keys());
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see I have a form object, with nested properties inside it which I want to bind to, and I'm also using <strong>mounted</strong>() and <strong>watch</strong> to store the data in local storage for when the page refreshes or when submitting the form (no validation at the moment). </p>