Back button behavior with nested views, multi step wizard

[idank]

I have a page with several steps that the user progress through, each step is mapped to a different path using a router.

{
  path: "/editor",
  name: "Editor",
  component: Editor,
  children: [
    {
      path: "design",
      components: { default: EditorPreview, step: DesignStep },
    },
    {
      path: "material",
      components: { default: EditorMaterials, step: MaterialStep },
    },
    {
      path: "quote",
      components: { default: EditorPreview, step: QuoteStep },
    },
  ],
},

Within each step, we move to the next step using a button that performs a router.push with the path of the next step.

The problem I'm having is maintaining correct "back" behavior on the browser. The default / step router-views render the previous step correctly, but the o-steps component, which has a marker of the current step, doesn't. It still shows the pre-back step highlighted. I guess this makes sense as the steps component isn't aware of the router or use it in any way.

What would be the correct way to handle this?

<Editor> template:

<o-steps v-model="store.activeStep">
    <o-step-item step="1">
        <router-view name="step" />
    </o-step-item>

    <o-step-item step="2">
        <router-view name="step" />
    </o-step-item>

    <o-step-item step="3">
        <router-view name="step" />
    </o-step-item>
</o-steps>
<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component" />
    </keep-alive>
</router-view>