Checkboxes not working correctly with Array - vuejs3

Question

I have a form that once certain checkboxes are checked, I need them to v-show additional form components. I can get it to work, sort of. If you only choose 1 option, it will populate the correct form, however, If multiple choices are made it doesn't show the additional forms components. Here is my code. It seems that am getting the correct values through the store, I'm just missing something. I apologize in advance if this is a duplicate question. I feel like I've read all of stackoverflow in the last few weeks :) Here is a screencast of it somewhat working http://somup.com/c3hD0TtnJh
I'm using Formkit, Vue3, Pinia. Thanks in advance.
App.vue
<template>
<ReasonForVisit />
<Sports v-show="data.reasonForVisit == 'si' " />
<WorkComp v-show="data.reasonForVisit == 'wc' " />
<Accident v-show="data.reasonForVisit == 'aa' " />
</template>
<script>
import ReasonForVisit from './components/ReasonForVisit.vue'
import Sports from './components/Sports.vue'
import WorkComp from './components/WorkComp.vue'
import Accident from './components/Accident.vue'
import { useFormStore} from './stores/formStore.js'
const data = useFormStore()
</script>
ReasonForVisit.vue
<template>
<FormKit
v-model="data.reasonForVisit"
type="checkbox"
label="Reason for Visit"
:options="{
we: 'Wellness Check',
aa: 'Auto Accident',
si: 'Sports Injury',
wc: 'Work Comp' }"
validation="required"
#change="data.checkedReason"
/>
<p>reason: {{ data.reasonForVisit }}</p>
</template>
FormStore.js
import { defineStore } from 'pinia'
import { differenceInYears, parseISO } from 'date-fns'
export const useFormStore = defineStore('formStore', {
state: () => ({
reasonForVisit: [],
}),
},
}
)

Answer 1

Your reasonForVisit is an array as you initialize it in FormStore.js as reasonForVisit: [].
Instead of data.reasonForVisit == 'si' and others, if you check for data.reasonForVisit.includes('si'), it should work as intended.
It shouldn't be working for 1 option too right now, I think the only reason it works for the 1 option case is the == operator considers si to be the same as ['si']. You should use strict equality to avoid such bugs in js.

Answer 2

You cannot compare Array with string. You need to iterate it or filter or use include method on it and check are it contains correct word. To do that, read about computed() properties. And if you are new to programming, use === not just == or you end up with bad errors in code.
Example:
<template>
<ReasonForVisit />
<Sports v-show="containsSi" />
<WorkComp v-show="containsWc" />
<Accident v-show="containsAa" />
</template>
<script>
import ReasonForVisit from './components/ReasonForVisit.vue'
import Sports from './components/Sports.vue'
import WorkComp from './components/WorkComp.vue'
import Accident from './components/Accident.vue'
import { useFormStore} from './stores/formStore.js'
const data = useFormStore()
const containsSi = computed(() => data.reasonForVisit.includes('si'))
const containsWc = computed(() => data.reasonForVisit.includes('wc'))
const containsAa = computed(() => data.reasonForVisit.includes('aa'))
</script>