Animating a background moving between grid elements

<script lang="ts" setup>
defineProps<{
  first: string
  second: string
}>()
const enabled = ref(false)

function toggle() {
  enabled.value = !enabled.value
}
</script>

<template>
  <Switch
    v-model="enabled"
    class="relative grid grid-cols-2 bg-grey-900 gap-2 border-box-border rounded-full border p-1 cursor-pointer"
    @click="toggle"
  >
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="enabled ? 'bg-purple-500' : ''"
    >{{ first }}</span>
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="!enabled ? 'bg-purple-500' : ''"
    >{{ second }}</span>
  </Switch>
</template>