stack.html

<div id="app"></div>

<style>
  .mt-4 {
    margin: 10px;
  }
</style>

<script src="https://unpkg.com/vue@next"></script>

<script>
  const { h, createApp } = Vue;
  const Stack = {
    render() {
      // slot
      const slot = this.$slots.default ? this.$slots.default() : [];

      return h(
        "div",
        { class: "stack" },
        slot.map((child) => {
          return h("div", { class: `mt-${this.$attrs.size}` }, [child]);
        })
      );
    },
  };

  const App = {
    template: `
    <Stack size="4">
      <div>hello</div>
      <Stack size="4">
        <div>hello</div>
        <div>hello</div>
        <Stack size="4">
          <div>hello</div>
          <div>hello</div>
        </Stack>
      </Stack>
    </Stack>
    `,
    properties: {
      size: {
        value: 0
      }
    },
    components: {
      Stack,
    },
  };

  createApp(App).mount("#app");
</script>