axiosで取得したデータをVue.jsで指定した要素内のみに値を反映させたい

前提・実現したいこと

・Contentful(CMS)を導入しています。
・サイトはNuxtとVueを用いて作成しています。
・Contentfulのデータはaxiosを用いて取得しています。
・Pugで記載しています。

ロード時に1度、ボタンクリック時にその都度、Contentfulからデータを取得し
HTML内のidで指定された要素内にのみ、値を反映させたいです。

下記にソースコードを掲載いたしましたが、
ロード時は「#FIRST」要素内のみに値を埋め込む。
ボタン２がクリックされたら「#SECOND」要素内に値を、
ボタン３がクリックされたら「#THIRD」要素内に値を反映させたいです。
なお、ボタンがクリックされる毎に、APIで値を取得し直す予定です。（欲しい情報の条件が異なるため）

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

要素を指定する、ということが上手くいかず詰まってしまいました。

該当のソースコード

index.vue(一部抜粋)

<template lang="pug">
  main
    div#FIRST {{data}}

    div#SECOND
      label(for="second_button")
        input(type="button", id="second_button", @click="setRequestParameter('2')")
        | ボタン２
      p {{data}}

    div#THIRD{{data}}
      label(for="third_button")
        input(type="button", id="third_button", @click="setRequestParameter('3')")
        | ボタン３
      p {{data}}
</template>

<script>
import axios from "axios"

export default {
    return {
      data: []
    }
  },
  methods: {
    getData: function(strParameter) {
      let url = "ContentfulのAPI" + strParameter

      let self = this
      axios.get(url)
        .then(function(response){
          self.data= response.data
        })
    },
    setRequestParameter: function(intCount){
      var strParameter = "?limit=" + intCount
      this.getImage(strParameter)
    }
  },
  mounted : function() {
    var strParameter = "?limit=10"
    this.getData(strParameter)
  }
}