How to make Modal Sheet Swipe Step partially opened by default?

I have a modal sheet component with the following structure:

<f7-sheet
        class="myClass"
        style="height: auto"
        swipe-to-step
        :backdrop="false"
    >
      <div class="sheet-modal-inner">
          <div class="sheet-modal-swipe-step">
             ...
          </div>
      </div>

      <template #static>
          <MyComponent></MyComponent>
      </template>
</f7-sheet>

Currently, I have to click a button to display the partial Modal Sheet, which I can then swipe up to reveal the full content:

<f7-button sheet-open=".myClass">Swipe To Step</f7-button>

My goal is to have the partial Modal Sheet displayed by default, hence remove the need to click a button. If I add “opened” to , the whole sheet is open at once, not just the swipe-step part.

Does anyone have an idea how to achieve this? Thank you.

I solved this by using the "opened" prop and assigning it to true in the onMounted hook:

<f7-sheet 
  v-model:opened="isOpened"
  ...
>
</f7-sheet>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    let opened = ref(null);

    onMounted( () => {
      opened.value = true;
    });

    return {
      isOpened: opened
    }
  }
}
</script>