Transition-group is not working in render function

[alan890104]

Versions

• nuxt: 2.15.8
• node: 14.17.6

Dependencies

"dependencies": {
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vuex-persistedstate": "^4.1.0",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-brands-svg-icons": "^6.0.0",
    "@fortawesome/free-solid-svg-icons": "^6.0.0",
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/tailwindcss": "^5.0.0-4",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23"
  }

Reproduction

I found that transition-group is not working in render function. I use nuxt/tailwind in this simple demo.

components/Faded.vue

<script>
export default {
  render(h) {
    return h(
      "transition-group",
      {
        props: {
          name: "faded",
        },
      },
      this.$slots.default
    );
  },
};
</script>

<style lang="postcss" scoped>
.faded-leave {
  opacity: 1;
}
.faded-leave-active {
  transition: opacity 1s;
}
.faded-leave-to {
  opacity: 0;
}
.faded-enter {
  opacity: 0;
}
.faded-enter-active {
  transition: opacity 1s;
}
.faded-enter-to {
  opacity: 1;
}
</style>

index.vue

<template>
  <div>
    <button class="bg-green-100" @click="AddIndex">Button</button>
    <Faded>
      <div key="1" v-show="this.showIndex === 0" class="bg-red-100">0</div>
      <div key="2" v-show="this.showIndex === 1" class="bg-yellow-100">1</div>
      <div key="3" v-show="this.showIndex === 2" class="bg-blue-100">2</div>
    </Faded>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showIndex: 0,
    };
  },
  methods: {
    AddIndex() {
      this.showIndex = (this.showIndex + 1) % 3;
    },
  },
};
</script>

[danielroe]

This is replicable without Nuxt. Would you raise an issue to https://github.com/vuejs/vue ? 🙏