title: How to use multiple references to the same vueJs component?
body: <p>I have a php page <code>person.php</code> that includes 2 vueJs components: <code>person-details.vue</code> and <code>phones.vue</code>. Each of these components include the same third component <code>notify-delete</code>. This <code>notify-delete</code> component includes a bootstrap modal dialog to confirm a deletion action of the parent component (person or phone).
  I use <code>props</code> to set a message in the modal confirmation dialog and <code>$refs</code> to show it.</p>
  
  <p><strong>Problem</strong>:
  When this props is set the <code>msg</code> props from the component <code>person</code> and the dialog is shown, the message is correctly set. However when I set from the <code>phones</code> component, the dialog shows the message set by <code>person</code>. as if <code>person</code> is constantly overriding the value of the <code>msg</code> props.</p>
  
  <p>here is a sample of the code:</p>
  
  <p><strong>person.php</strong>:</p>
  
  <pre><code>&lt;person-details details="&lt;?= json_encode($person) ?&gt;"&gt;&lt;/person-details&gt;
  &lt;phones details="&lt;?= json_encode($phones) ?&gt;"&gt;&lt;/phones&gt;
  </code></pre>
  
  <p><strong>Person-details.vue</strong>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;notify-delete ref="modalDeletePerson" :entity="'person'" :msg="deleteMsg" @confirmed="deleteMe"&gt;&lt;/notify-delete&gt;
      &lt;button type="button" @click="confirmDelete"&gt;Delete this person&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data () {
              return {
                  deleteMsg: ''
              }
          },
          methods: {
              confirmDelete() {
                  this.deleteMsg = 'Are you sure you want to delete this person?'
                  this.$refs.modalDeletePerson.show()
              },
              deleteMe() {
                  // delete person
              }
          }
      }
  &lt;/script&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Phones.vue</strong>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;notify-delete ref="modalDeletePhone" :entity="'phone'" :msg="deleteMsg" @confirmed="deleteMe($event)"&gt;&lt;/notify-delete&gt;
  
      &lt;button type="button" @click="confirmDelete"&gt;Delete this phone&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data () {
              return {
                  deleteMsg: ''
              }
          },
          methods: {
              confirmDelete() {
                  this.deleteMsg = 'Are you sure you want to delete this phone?'
                  this.$refs.modalDeletePhone.show()
              },
              deleteMe() {
                  // delete phone
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Notify-delete.vue</strong>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="modalDelete" class="modal fade" tabindex="-1" role="dialog"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-body"&gt;
                      {{msg}}
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="submit" data-dismiss="modal" @click="confirm"&gt;Delete&lt;/button&gt;
                      &lt;button type="button" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          props: ['entity', 'msg'],
  
          methods: {
              show() {
                  $('#modalDelete').modal('show')
              },
  
              confirm() {
                  this.$emit('confirmed')
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any idea how I can have two distinguish instances of the same component?</p>