Vueのクリックイベント時に式を実行させることがうまくいきません。

Vue.jsがうまくいきません
の続き

前回の質問で教えていただいたことを参考に下記のように変更を行ったのですが、やはりうまくいきません。

<button @click="change"> </button>

var app = new Vue({
  el: '#changeBtn2',
  data: {
    headding: '当社のダミー商品１つめを紹介します。',
    description1: '1. 当社のダミー商品１つめを紹介します。...',
    description2: '2. 当社のダミー商品１つめを紹介します。...'
    // show: false
  },
  methods: {
    change: function() {
      headding: '当社のダミー商品2つめを紹介します。',
    description1: '1. 当社のダミー商品2つめを紹介します。...',
    description2: '2. 当社のダミー商品2つめを紹介します。...'
    }
  }
})

---

追記

mjy さんの回答を元に書きなおしたのですが、やはりうまくいきません。

    <button @click="change"> </button>

    <p id="description1">
    {{ description1 }}
</p>

var app = new Vue({
  el: '#changeBtn1',
  data: {
    headding: '当社のダミー商品2つめを紹介します。',
    description1: '1. 当社のダミー商品2つめを紹介します。...',
    description2: '2. 当社のダミー商品2つめを紹介します。...'
    // show: false
  },
  methods: {
    change: function() {
        headding= '当社のダミー商品2つめを紹介します。';
        description1= '1. 当社のダミー商品2つめを紹介します。...';
        description2= '2. 当社のダミー商品2つめを紹介します。...';
        },
  },
});