改变播放按钮图标失败

在Vuex中mutation定义了一个方法用来改变isplay的状态

  mutations: {
    update (state, value) {
      state.isplay = value
    }

<script setup >
function play () {
  let audioRef = document.getElementById("audioTest")
  if (audioRef.paused) {
    audioRef.play()
 console.log(STATE.isplay);//打印isplay
    store.commit('update', false)
  } else {
    audioRef.pause()
    store.commit('update', true)
 console.log(STATE.isplay);//打印isplay
  }
}
<script >

isplay是用来切换播放按钮的图标的

<span
        class="iconfont icon-bofang1"
        @click="play"
        v-if="STATE.isplay"
      ></span>
      <span class="iconfont icon-bofang_" v-else @click="play"></span>

点击播放按钮但是控制台只是打印一种状态，当然按钮的图标也没有改变。请各位

因为我想把判断播放按钮放在全局中所以用vuex来管理

CSS的话是不是需要使用display隐藏原样式？