Vue 3 - Erroneous properties show in preview when using init-state

[hybridwebdev]

Describe the bug

Consider the following story:

<script setup>
import { ref } from 'vue'
import { logEvent } from 'histoire/client'
import BaseButton from './BaseButton.vue'
let initStateNoBeuno = () => ({
  color: "#f00",
})
let initStateBeuno = () => ({
    props:  {
      color: "#f00"
    }
})
const text = ref('Click me')
</script>

<template>
  <Story >

    <Variant 
        #default='{ state }' :init-state="initStateNoBeuno"
        title='Unexpected properties'
      >
      <BaseButton v-bind="state">
        {{ text }}
      </BaseButton>
    </Variant>

    <Variant 
      #default='{ state }'
      :init-state="initStateBeuno"
      title='Nesting works'
    >
      <BaseButton v-bind="state.props">
        {{ text }}
      </BaseButton>
    </Variant>

    <template #controls>
      <HstText title="default slot" v-model="text" />
    </template>
  </Story>
</template>

When using the init-state property, either on a story or a variant, unexpected properties show in the dynamic source preview as shown in the screen shot:

If you use a nested property, then these properties disappear.

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-nqsezx?file=src%2FBaseButton.story.vue

System Info

Issue occurs using VUE 3.3 but also in provided sandbox environment.

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• histoire-vue3-starter-nqsezx (Open reproduction)