Error when clicking a button to show/hide columns in table

I'm using Vue3 in a project and I have a table where I show some details on a list of players, and have a button that shows/hides more columns. Everything works fine, but when I click the button, I get the following warning and error:

runtime-core.esm-bundler.js?5c40:6871 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <FontAwesomeIcon icon="user" > 
  at <League onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {refreshPage: ƒ, showDetails: ƒ, joinLeague: ƒ, leaveLeague: ƒ, winner: ƒ, …} > > 
  at <RouterView> 
  at <App>

runtime-core.esm-bundler.js?5c40:3340 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
    at invokeDirectiveHook (runtime-core.esm-bundler.js?5c40:3340)
    at patchElement (runtime-core.esm-bundler.js?5c40:4207)
    at processElement (runtime-core.esm-bundler.js?5c40:4075)
    at patch (runtime-core.esm-bundler.js?5c40:3992)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4608)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at updateComponent (runtime-core.esm-bundler.js?5c40:4472)
    at processComponent (runtime-core.esm-bundler.js?5c40:4405)
    at patch (runtime-core.esm-bundler.js?5c40:3995)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4310)

The code is quite simple, and the functionality works but after I get the error, I lose the ability to navigate in my app (the routes stop working and I have to refresh the page).

This is the relevant bit:

<div :class="{'col-md-2': !playersDetail, 'col-md-10': playersDetail}">
          <table class="table table-sm table-stripped table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>Jogador</th>
                <th v-show="playersDetail">#1</th>
                <th v-show="playersDetail">#2</th>
                <th v-show="playersDetail">#3</th>
                <th v-show="playersDetail">#4</th>
                <th>Pontos&nbsp;&nbsp;&nbsp;&nbsp;<span class="link" @click="playersDetail=!playersDetail" >
                    <font-awesome-icon icon="angle-double-right" v-if="!playersDetail"/>
                    <font-awesome-icon icon="angle-double-left" v-else/>
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(j, index) in sortedLeaguePlayers" :key="index">
                <td>{{index +1}}</td>
                <td>{{j.username}}</td>
                <td v-show="playersDetail">{{j.victories}}</td>
                <td v-show="playersDetail">{{j.seconds}}</td>
                <td v-show="playersDetail">{{j.thirds}}</td>
                <td v-show="playersDetail">{{j.fourths}}</td>
                <td>{{j.points}}</td>
              </tr>
            </tbody>
          </table>
        </div>

Any ideas what I might be doing wrong? TIA