title: [Vue warn]: Property or method "StartGame" is not defined on the instance but referenced during render
body: <p>[Vue warn]: Property or method &quot;StartGame&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  <p><a href="https://i.stack.imgur.com/np1ne.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>This is the code from jsfiddle:
  html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Monster Slayer&lt;/title&gt;
      &lt;script src=&quot;https://npmcdn.com/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css_project1/&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css_project1//app.css&quot;&gt;
      &lt;script src=&quot;https://unpkg.com/vue@2.6.9/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;
      &lt;section class=&quot;row&quot;&gt;
          &lt;div class=&quot;small-6 columns&quot;&gt;
              &lt;h1 class=&quot;text-center&quot;&gt;YOU&lt;/h1&gt;
              &lt;div class=&quot;healthbar&quot;&gt;
                  &lt;div class=&quot;healthbar text-center&quot; 
                  style=&quot;background-color: green; margin: 0; color: white;&quot;
                  :style=&quot;{width:playerHealth + '%'}&quot;&gt;
                      {{ playerHealth }}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;small-6 columns&quot;&gt;
              &lt;h1 class=&quot;text-center&quot;&gt;MONSTER&lt;/h1&gt;
              &lt;div class=&quot;healthbar&quot;&gt;
                  &lt;div class=&quot;healthbar text-center&quot; 
                  style=&quot;background-color: green; margin: 0; color: white;&quot;
                  :style=&quot;{width:monsterHealth + '%'}&quot;&gt;
                          {{ monsterHealth }}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;row controls&quot; v-if=&quot;!gameIsRunning&quot;&gt;
          &lt;div class=&quot;small-12 columns&quot;&gt;
              &lt;!-- &lt;input type=&quot;text&quot;&gt; --&gt;
              &lt;button id=&quot;start-game&quot; @click=&quot;StartGame&quot; &gt;START NEW GAME&lt;/button&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;row controls&quot; v-else&gt;
          &lt;div class=&quot;small-12 columns&quot;&gt;
              &lt;button id=&quot;attack&quot; @click=&quot;attack&quot;&gt;ATTACK&lt;/button&gt;
              &lt;button id=&quot;special-attack&quot; @click=&quot;specialAttack&quot;&gt;SPECIAL ATTACK&lt;/button&gt;
              &lt;button id=&quot;heal&quot; @click=&quot;heal&quot;&gt;HEAL&lt;/button&gt;
              &lt;button id=&quot;give-up&quot; @click=&quot;giveUp&quot;&gt;GIVE UP&lt;/button&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class=&quot;row log&quot; v-if=&quot;gameIsRunning&quot;&gt;
          &lt;div class=&quot;small-12 columns&quot;&gt;
              &lt;ul&gt;
                  &lt;li&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>new Vue({
      el:&quot;#app&quot;,
      data: {
        playerHealth: 10,
        monsterHealth: 10,
        gameIsRunning:false,
      },
      methods:{
          StartGame: function(){
              this.gameIsRunning  = true;
              this.playerHealth = 40;
              this.monsterHealth = 40;
          },  
      }
  })
  </code></pre>