Vue.jp - チュートリアル（Vue Mastery）のメソッドが効かない

Question

前提・実現したいこと

今vue.jpを勉強しているところでVue Masteryのレッスン5にいるのですが
https://www.vuemastery.com/courses/intro-to-vue-js/event-handling
同じようにしてもメソッドがうまく働きません。
あちこちで答えを探しているのですが最終的にここで何が悪いのか教えて頂きたく質問しました。どうぞ宜しくお願いします。

発生している問題・エラーメッセージ

addToCart is not defined

該当のソースコード

 <div id="app">
    <div class="product">
				
      <div class="product-image">
         <img v-bind:src="image">
      </div>
				
      <div class="product-info">
         <h1>{{ product }}</h1>
         <p v-if="inventory > 10">In Stock</p>
         <p v-else-if="inventory <= 10 && inventory > 0">Almost Sold Out!</p>
         <p v-else>Out of Stock</p>
         <ul>
            <li v-for="detail in details">{{ detail }}</li>
         </ul>
         <ul>
            <li v-for="size in sizes">{{ size }}</li>
         </ul>				
         <div v-for="variant in variants" :key="variant.variantId">
            <p @mouseover="updateProduct(variant.variantImage)">{{ variant.variantColor }}</p>
         </div>
         <button v-on:click="addToCart">Add to Cart</button>
         <div class="cart">
            <p>Cart({{cart}})</p>
         </div>
      </div>
   </div>
 </div>

var app = new Vue({
   el: '#app',
   data: {
      product: 'Socks',
      image: './assets/vmSocks-green.png',
      inventory: 19,
      details: ["80% cotton", "20% polyester", "Gender-neutral"],
      variants: [
         {
            variantId: 2234,
            variantColor: "green",
            variantImage: "./assets/vmSocks-green.png"
         },
         {
            variantId: 2235,
            variantColor: "blue",
            variantImage: "./assets/vmSocks-blue.png"
         }
      ],
      sizes: ["XS", "S", "M", "L", "XL"],
      cart: 0,
      methods: {
         addToCart(){
            this.cart += 1
         },
         updateProduct(variantImage){
            this.image = variantImage
         }
      }
   }
})

Answer 1

methodsの位置がおかしいです。

var app = new Vue({
   el: '#app',
   data: {
      methods: {
      }
   }
})

ではなく

var app = new Vue({
   el: '#app',
   data: {
   },
   methods: {
   }
})

です。

Comments

[vanm]

こんなに簡単な事だったのですね。やっと勉強の続きに戻れます。
_hiroさん、本当に本当に有難うございます！