title: Vue JS Using local variable without defining in data() function
body: <p>I am a beginner to Vue JS. I have to use a variable inside a component whose value changes often.
  So when I declare and define it under data() the following warn is coming in Chrome console
  <a href="https://i.stack.imgur.com/N9R9h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N9R9h.png" alt="enter image description here"></a></p>
  
  <p>Since when there is a change in data() variables automatically Vue framework calls render function.</p>
  
  <p>Is there any way to declare and use a variable other than declaring it in data() method ??</p>
  
  <pre><code>&lt;template&gt;
      &lt;ul&gt;
           &lt;div v-for="(list,index) in itemlist" :key="index"&gt;
             &lt;div v-if="!isFirstCharSame(list.label)" &gt;{{ firstChar }} &lt;/div&gt;
              &lt;li&gt;
                &lt;span&gt;{{ list.label }}&lt;/span&gt;
              &lt;/li&gt; 
           &lt;/div&gt;  
         &lt;/ul&gt; 
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      data() {
        return {
          itemlist: [
                    {"label":"Alpha"},
                    {"label":"Beta"},
                    {"label":"Charlie"},
                    {"label":"Delta"}],
          firstChar:"$"
        }
      },
      methods : {
        isFirstCharSame: function(str) {
        if(str.startsWith(this.firstChar)) {
          return true;
        }
        this.firstChar = str.charAt(0);
        return false;
      }
      }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Expected output should be like this</p>
  
  <p><a href="https://i.stack.imgur.com/qZmiJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qZmiJ.png" alt="Expected Output"></a></p>
  
  <p>Inside Group A It should display all the elements starting with A</p>