title: How can I reset data in child component from parent component on vue.js 2?
body: <p>My parent component like this :</p>
  
  <pre><code>&lt;template&gt; 
      &lt;div ref="modal" class="modal" tabindex="-1" role="dialog"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content modal-content-data"&gt;
                  &lt;form id="form-data"&gt;
                      ...
                      &lt;location-select .../&gt;
                      ...
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import LocationSelect from './LocationSelect.vue'
      export default{
          name: 'CartModal',
          components:{
              LocationSelect,
          },
          mounted(){
              $(this.$refs.modal).on('hidden.bs.modal', () =&gt; {
                  Object.assign(this.$data, this.$options.data())
              })
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>If modal hidden, it will reset data in parent component and it works</p>
  
  <p>I want to reset data also in child component</p>
  
  <p>I try like this :</p>
  
  <pre><code>&lt;template&gt;
      &lt;select class="form-control" v-model="selected" ...&gt;
          ...
      &lt;/select&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default{
          name: 'LocationSelect',
          ...
          created() {
              $(this.$parent.$refs.modal).on('hidden.bs.modal', () =&gt; {
                  Object.assign(this.$data, this.$options.data())
              })
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>But it does not work</p>
  
  <p>The child component no reset the data</p>
  
  <p>How can I solve this problem?</p>