Vuejs: V-HTML data binding of html data against eslint rule

I am using the following method to bind html and display in my page. It is working perfectly, however i receive a warning from my eslint that 'v-html' directive can lead to XSS attack.eslint(vue/no-v-html)

  <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>

Then i change it following method. But i not able to render html tag.

 <button
            id="foreignerBtn"
            class="tabButton"
            @click="foreignerClick"
          >{{ textContent2 }}</button>

As Decade Moon mentions you can disable the rule if the content passed to v-html is sanitized HTML.

https://eslint.vuejs.org/rules/no-v-html.html

Disable the rule by wrapping the html in

<!-- eslint-disable vue/no-v-html -->
<button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>
<!--eslint-enable-->