How to apply args only to the component, not to the html wrapper in decorators?

[Radouch]

I am using Storyboook 7.0.0-beta.55 for my Vue 3 component library. The story is written in CSF 3 format.

Code of the story looks like:

export const Test = {
  render: (args) => ({
    components: { CgsNumLocaleInput },
    data() {
      return { firstValue: 13};
    },
    setup() {
      return { args };
    },
    template: `
<CgsNumLocaleInput v-bind="args" v-model="firstValue"></CgsNumLocaleInput>
    `,
  }),
  decorators: [
    () => ({
      template: `
      <div class="input-group">
      <span class="input-group-text">firstValue</span>
      <story />
    `,
    }),
  ],
  args: {
    min: 1,
    max: 20,
    step: 1,
    class: "form-control"
  }
};

I need to apply args to the component CgsNumLocaleInput only. Unfortunatelly, generated code looks like

<div id="storybook-root" data-v-app="">
<!-- PROBLEM: Following div gets args too -->
  <div class="input-group form-control" min="1" max="20" step="1">
<!--
Should be: <div class="input-group">
 -->
    <span class="input-group-text">firstValue</span
    ><input
      type="text"
      min="1"
      max="20"
      step="1"
      class="form-control bg-danger"
      readonly=""
    /><input
      type="number"
      min="1"
      max="20"
      step="1"
      class="form-control bg-danger"
      style="display: none"
    />
  </div>
</div>

Any idea how to apply args only to the elements with v-bind="args",