Dynamically wrap and group headings in list items with Vue render functions

I want to create a Vue component <Steps></Steps that is an ordered list, but provides some flexibility in how the slots are passed in.

Each step, or <li>, is created when encountering a heading tag. It could be either an h2, h3, or h4.

Inside of the <Steps> component, each time a heading tag is found, that needs to create and wrap everything up to the next heading tag of the same heading level. I am running into problems also because if a an h4 is used after an h3 this should not create an extra <li>.

It seems the best way to solve this would be with Vue’s render h() function but I am really stuck on this one.

Input

<Steps>
  <h3>heading a</h3>
  <p>paragraph a<p>
  <div class="code-block"><pre>const x = 1</pre></div>
  <h4>this should not create an li</h4>
  <h3>heading b</h3>
  <p>paragraph b<p>
</Steps>

Output

<ol>
  <li>
    <h3>heading a</h3>
    <p>paragraph a<p>
    <div class="code-block"><pre>const x = 1</pre></div>
    <h4>this should not create an li</h4>
  </li>
  <li>
    <h3>heading b</h3>
    <p>paragraph b<p>
  </li>
</ol>