Vue/Vite reactivity issues when changing a select dropdown arg

[billpliske]

Summary

Select form reactivity

Completely recognizing it might be my own misunderstanding here.
(My code is below for my stories file.)

When I change my type dropdown to "icon", the page flickers, my icon select appears, and there's my default icon button in the docs viewer's UI.

However, when I go to change that icon select to something else, say, "templates" ... only the code view updates. The viewer is still displaying my "close" icon button.

If I go to a different component and come back, now my "templates" icon button is in the viewer.

Thanks for the advice!

import Button from './Button.vue'

export default {
  component: Button,
  title: 'Components/Button',
  tags: ['autodocs'],
  argTypes: {
    type: {
      control: 'select',
      options: ['default', 'save', 'delete', 'cancel', 'clear', 'placement', 'icon'],
      description: 'Select the control prop that fits your button content.',
    },
    content: {
      description: 'Change the control to reflect button content.',
    },
    modal: {
      description: 'Modal buttons increase in size.',
    },
    icon: {
      control: 'select',
      description: 'If making use of the Svg component.',
      options: ['close', 'templates', 'trash'],
      if: { arg: 'type', eq: 'icon' },
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'Basic building block for Socrates buttons.',
      },
      source: {
        state: 'open', // Ensure the code is expanded by default
      },
    },
  },
}

export const Example = {
  args: {
    content: 'Run Selected Case',
    type: 'default',
    modal: false,
    icon: 'close',
  },
}

Additional information

No response

Create a reproduction

No response

[billpliske]

Of course, the answer was on my end.
the "icon" arg is actually tied in to a Svg.vue component.

But that component needed to watch for changes, in order for the select box to work properly.
So my Svg.vue file was now this:

<script setup lang="ts">
import { defineAsyncComponent, ref, watch } from 'vue'

const props = defineProps<{
  name: string
  disabled?: boolean
  isleft?: boolean
}>()

const icon = ref(null)

const loadIcon = async (name: string) => {
  icon.value = defineAsyncComponent(() => import(`@/assets/svg/${name}.svg`))
}

watch(
  () => props.name,
  (newName) => {
    loadIcon(newName)
  },
  { immediate: true },
)
</script>

<template>
  <component
    :is="icon"
    class="fill-current"
    :class="{ 'disabled-svg': props.disabled, [`${props.name}-svg`]: props.isleft }"
  />
</template>