【Vue】ケバブケースのクラス名をクリックで付けたり外したりしたい

Question

実現したいこと

ケバブケースのクラス名をクリックで付けたり外したりしたいです。
Buefyというフレームワークを使っており、is-activeというクラスが付与されたら、モバイル上でヘッダーの開閉ができるようになっています。
ただ、このフレームワークはJSは含まれずCSSのみで構成されているため、is-activeの付け外しは自分で実装するようにと記載されています。
公式

Vueではv-bindのときはケバブケースでは読みこめず、キャメルケースが推奨されており、どうしてもケバブケースを使いたいならシングルクォーテーションで囲むと使えるというのは、調べて分かりました。

ですが、v-on:clickでis-activeをtrueとfalseの切り替えを実装する時に、この（v-on:click="'is-active'=!'is-active'"）書き方だとコンパイルエラーとなってしまいました。

なにか良い書き方があればアドバイスを頂けますと幸いです。
よろしくお願いいたします。

エラー

  Errors compiling template:

  invalid expression: Invalid left-hand side in assignment in

    'is-active'=!'is-active'

  Raw expression: v-on:click="'is-active'=!'is-active'"

試したこと

    <div>
      <a
        role="button"
        class="navbar-burger"
        v-bind:class="{ active: 'is-active' }"
        aria-label="menu"
        aria-expanded="false"
        data-target="navbarBasicExample"
        v-on:click="'is-active'=!'is-active'"  ←ここです
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div
      id="navbarBasicExample"
      class="navbar-menu"
      v-bind:class="{ active: 'is-active' }"
    >
    </div>

Answer 1

文法的にはこう。
クリックしたらis-activeの真偽値が変わるのでこう。

- v-on:click="'is-active'=!'is-active'"
+ v-on:click="is-active = !is-active"

Comments

[nomu_lui]

教えていただいた書き方でも、同じくエラーになってしまいました。
`{{ }}`これで囲ったりするのが良いのでしょうか。

[szk.]

あと、「=!」ではなく「!=」かと

[nomu_lui]

ありがとうございます！
色々勘違いしていたようで、教えていただいたヒントを元に実装できました