When I change storybook controls, vue setup is not called again

[PrateekGoyal18]

I have a component BStepperItem defined like this -

import {
  defineComponent,
  type PropType,
  ref,
} from "vue";
import { BIcon } from "../../components";

type StepperItemTypes = "complete" | "current" | "error" | "future";

export default defineComponent({
  name: "BStepperItem",
  components: {
    BIcon,
  },
  props: {
    stepNo: {
      type: [String, Number],
    },
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    errorText: {
      type: String,
    },
    type: {
      type: String as PropType<StepperItemTypes>,
    },
    lineLength: {
      type: String,
    },
    last: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const refType = ref(props.type);
    const refLineLength = ref(props.lineLength);
    return { refType, refLineLength };
  },
});

Its corresponding HTML looks something like this -

<div
  :class="[$style['stepper-item'], $style[`stepper-item__${refType}`]]"
  :last="last ? 'true' : 'false'"
>
  <div :class="[$style['stepper-item__step']]">
    <div
      :class="[
        $style['stepper-item__step_ellipse'], 
        stepNo && $style['stepper-item__step_ellipse_numbered'], 
        $style[`stepper-item__step_ellipse_${refType}`]
			]"
    >
      <span class="body2">{{ stepNo }}</span>
    </div>
    <hr
      v-if="!last"
      :class="[$style['stepper-item__step_line'], $style[`stepper-item__step_line_${refType}`]]"
      :style="{width: `${refLineLength}`}"
    />
  </div>
  <div
    :class="[$style['stepper-item__label'], $style[`stepper-item__label_${refType}`]]"
  >
    <div :class="[$style[`stepper-item__label_heading`]]" class="subtitle">
      <span>{{ label }}</span>
    </div>
    <div :class="[$style[`stepper-item__label_description`]]" class="body2">
      <b-icon
        v-if="refType==='error' && errorText?.length > 0"
        icon="error"
        color="red"
      />
      <span v-if="refType !== 'error'">{{ description }}</span>
      <span v-if="refType === 'error'">{{ errorText }}</span>
    </div>
  </div>
</div>

And the story is -

import { type Meta, type StoryFn } from "@storybook/vue3";
import { BStepperItem } from "../../components";

export default {
  title: "Components/StepperItem",
  argTypes: {
    type: {
      options: ["complete", "current", "error", "future"],
      control: { type: "radio" },
    },
  },
  component: BStepperItem,
} as Meta<typeof BStepperItem>;

const Template: StoryFn<typeof BStepperItem> = (args, { argTypes }) => ({
  components: { BStepperItem },
  setup() {
    return { args };
  },
  template: `<b-stepper-item stepNo=1 label="Title name here" description="Description text" type="complete" lineLength="88px" />`,
});
export const Default = Template.bind({});

Now the main issue is, as I have radio buttons to control the type of stepper-item, if I directly use props value in HTML bypassing setup function, the stepper is updated when I update the radio button value.
But as here I am passing the props through setup function (I have to run some changes on the prop values and then use them in my HTML), then the stepper type is not updated when I update the radio button value.

"vue": "3.2.47"
"@storybook/vue3": "7.0.7"

I am scratching my head over where I am going wrong here. Can anyone please help me with this.