vue 3 composition API, conditional rendering - vue.js

Question

I have a button that needs to change it's icon when clicked in order to toggle between play and pause.
Here is a minimalistic sample of the code :
<template>
<div #click="toggleF">
<i v-if="toggleForce == true" class="fas fa-pause"></i>
<i v-if="toggleForce == false" class="fas fa-play"></i>
</div>
</template>
<script>
import {onMounted, onBeforeMount, ref} from 'vue'
export default {
setup(){
const toggleForce = ref(false)
function toggleF () {
toggleForce.value = !toggleForce.value
};
return {toggleF,toggleForce}
}
}
</script>
I get the following warning/error :

Answer 1

please try the code below:
demo 1
<template>
<div #click="toggleForce = !toggleForce">
<i v-if="toggleForce" class="fas fa-pause" />
<i v-else class="fas fa-play" />
</div>
</template>
<script setup>
import {ref} from 'vue'
const toggleForce = ref(false)
</script>
the <script setup> tag is available since the vue version 3.2 and will help you to clean up your script area
demo 2
const { ref, createApp } = Vue
createApp({
setup() {
const toggleForce = ref(false)
const toggleF = () => {
toggleForce.value = !toggleForce.value
}
return {
toggleForce,
toggleF
}
}
}).mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app">
<button #click="toggleF">toggleForce
<div v-if="toggleForce == true" class="fas fa-pause">TRUE</div>
<div v-if="toggleForce == false" class="fas fa-play">FALSE</div>
</button>
</div>