title: Vue - instance data is not defined
body: <p>I have a menu of topics (e.g. "About us", "Support") and I want to be able to tell what topic is active right now. When a topic is clicked it will become the active one. Think of it as a substitute for a router that will set an active route. This is not possible in my case since I'm working in SharePoint 2010... in a content editor. So I made the decision to have an <strong>activeTopic</strong> variable in my Vue instance.</p>
  
  <p><strong>The Vue instance</strong></p>
  
  <pre><code>new Vue({
      el: '#app',
      data: {
          activeTopic: '',
      }
  });
  </code></pre>
  
  <p>This is because the <strong>activeTopic</strong> has to update another component and show some data based on the active topic. Like a router showing a child route.</p>
  
  <p><strong>The topic component</strong></p>
  
  <pre><code>Vue.component('topic', {
      props: ["title"],
      methods: {
          setActiveTopic: function (title) {
              activeTopic = title;
          },
          isActiveTopic: function (title) {
              return activeTopic == title;
          }
      },
      template: `
          &lt;div v-bind:class="{active: isActiveTopic(title)}" v-on:click="setActiveTopic(title)"&gt;
              &lt;p v-text="title"&gt;&lt;/p&gt;
          &lt;/div&gt;
      `
  });
  </code></pre>
  
  <p>The <strong>setActiveTopic</strong> function works as it should when I click it; it updates the activeTopic. But the <strong>isActiveTopic</strong> function gives me this error:</p>
  
  <pre><code>Error in render: "ReferenceError: activeTopic is not defined"
  </code></pre>
  
  <p>What I don't understand is that I can edit the activeTopic variable but I can't make a comparison? I've tried setting a default value but it still says it is undefined.</p>