title: Why are my Vue instance's properties and methods not available in the template?
body: <ul>
  <li>I set up a Vue.js CLI project.</li>
  <li>On a page, I want to define a variable in <code>data()</code> and then use it in my template.</li>
  <li>Why does the following code tell me:</li>
  </ul>
  
  <blockquote>
    <p>Property or method "message" is not defined on the instance but
    referenced during render. Make sure to declare reactive data
    properties in the data option.</p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Page 2&lt;/h1&gt;
          &lt;p&gt; You can go back to
              &lt;router-link to="/"&gt;home&lt;/router-link&gt;.&lt;/p&gt;
          &lt;p&gt;[{{message}}]&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  export default {
      name: "Page2",
      data() {
          return {
              message: "here it is"
          }
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wtOsQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wtOsQ.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>And this code:</p>
  
  <pre><code>            &lt;button class="btn" @click="test()"&gt;the test&lt;/button&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  export default {
      name: "Page2",
      data() {
          return {
              message: "here it is"
          }
      },
      methods: {
          test() {
              console.log('test');
          }
      }
  }
  </code></pre>
  
  <p>Tells me similarly:</p>
  
  <blockquote>
    <p>Property or method "test" is not defined on the instance but
    referenced during render. Make sure to declare reactive data
    properties in the data option.</p>
  </blockquote>
  
  <p><strong>What else do I need to do to make these variables and methods available in my template on the page?</strong></p>
  
  <p>This structure of code has worked in other Vue.js CLI projects so it much be something not set right in the project in the environment somewhere.</p>
  
  <p>For instance, this code works in another project:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="start alert alert-success" role="alert"&gt;
      {{ msg }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'start',
    data() {
      return {
        msg: 'Please choose an option.'
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And it works on the <code>Home</code> page but not on <code>Page1</code> or <code>Page2</code>. My <code>index.js</code> page looks like this:</p>
  
  <pre><code>import Vue from "vue";
  import Router from "vue-router";
  import Home from "@/components/Home";
  import Page1 from "@/components/Page1";
  import Page2 from "@/components/Page2";
  
  Vue.use(Router);
  
  export default new Router({
    routes: [
      {
        path: "/",
        name: "Home",
        component: Home
      },
      {
        path: "/page1",
        name: "Page1",
        component: Page1
      },
      {
        path: "/page2",
        name: "Page2",
        component: Page2
      }
    ]
  });
  </code></pre>