【Vue.js】子コンポーネントで表示させている画像に対してクリックした際の切り替え方法について【画像】

Question

実装イメージ

悩んでいること

画像は子コンポーネントのほうでpタグにクラスを指定し、cssのbackgroundで表示させています。
以下のようにボタンを用意した場合は切り替えできるのですが、今回<sample>の子コンポーネントのほうで、画像を読み込んでいるため、切り替えがうまくいっておりません。

  <button @click="point1=true">
  <sapmle @click="point1=false">

以下コード@click="point1=false"では、画像をクリックしても、falseのためそもそも表示されません。
@click="point1=true"だと、初回の切り替えはできるのですが、pointプロパティがtrueのままになってしまい、2回目以降が、クリックしても反応しません。

親コンポーネント

<!-- モーダル表示時 -->
  <sapmle
    :point="point1"
    @click="point1=false"
  >
    <p>hoge</p>
    <p>fuga</p>
    <button @click="point1=false">閉じる</button>
  </sapmle>
  <!-- モーダル表示時 -->

<script>
export default {
  props: {
    point: {
      type: Boolean,
      default: false,
    }
  },
};
</script>

子コンポーネント

<!-- imgクラス付与で、backgroundで画像表示させています -->
<template>
  <p class="img"></p>
</template>

Vueの知識が浅く、不足している部分もあるかと思いますが、アドバイスいただけると助かります。
よろしくお願いします。

Answer 1

以下のようにしたところ切り替えうまくいきました。
✖︎<sapmle @click="point1=false></sapmle>
⭕️<sapmle @click="point1=!point1></sapmle>