title: How to toggle only THIS element in Vue
body: <p>New to working with Vue and I have a page with customers info on it (email, phone, name, address, payment info...). Each element can be clicked on to show an input form to edit the data selected. Here is my mark-up for the email element</p>
  
  <pre><code>&lt;label&gt;Email&lt;/label&gt;
  &lt;div class="customer-email item editable"&gt;
     &lt;div v-if="!edit_data" @click="editData"&gt;{{customer.email}}&lt;/div&gt;
     &lt;form v-if="edit_data"&gt;
        &lt;input v-model="customer.email"&gt;&lt;/b-input&gt;
        &lt;button @click="saveData"&gt;Save&lt;/button&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To achieve the functionality of hiding the data and showing the input to update the data I have the following:</p>
  
  <pre><code>data() {
    return {
       edit_data: false,
       customer: {
          name: 'John Doe',
          email: 'johndoe@gmail.com',
       }
    };
  },
  methods: {
      editData: function () {
         this.edit_data = !this.edit_data;
     },
  }
  </code></pre>
  
  <p>All pretty straight forward. But if I have more than 1 element that can be edited how do I ONLY have this functionality effect the element clicked? If I had some mark-up like this:</p>
  
  <pre><code>&lt;div&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;div class="customer-email item editable"&gt;
              &lt;div v-if="!edit_data" @click="editData"&gt;{{customer.email}}&lt;/div&gt;
  
              &lt;b-form v-if="edit_data"&gt;
                  &lt;b-input v-model="customer.email"&gt;&lt;/b-input&gt;
                  &lt;button @click="saveData"&gt;Save&lt;/button&gt;
              &lt;/b-form&gt;
          &lt;/div&gt;
  
  
          &lt;label&gt;Name&lt;/label&gt;
          &lt;div class="customer-name item editable"&gt;
              &lt;div v-if="!edit_data" @click="editData"&gt;{{customer.name}}&lt;/div&gt;
  
              &lt;form v-if="edit_data"&gt;
                  &lt;input v-model="customer.email"&gt;&lt;/b-input&gt;
                  &lt;button @click="saveData"&gt;Save&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When one element is clicked they all open which makes sense. But that is NOT what I want, I only want to 'open' the element that was clicked.</p>
  
  <p>I know how to address this the jQuery way.</p>
  
  <pre><code>$(element).click(function() {
      $(this).sibling(element).show();
      $(this).hide();
  });
  </code></pre>
  
  <p>Or something similar. </p>
  
  <p>So my question is... <strong>Is there a best practice's Vue way to get this done??</strong> Thanks in advance.</p>