[BUG] <template functional> is no longer supported in Vue 3

[jrgleason]

Describe the bug
When I try to compile store-front UI with Vite and Node I get...

[vite:vue] <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead.
file: /Users/jackiegleason/Code/personal/vue-shop-test/vue-commerce-test/node_modules/@storefront-ui/vue/src/components/atoms/SfArrow/SfArrow.vue

This prevents me from using it in my project. The solution is obvious just remove the function from the template.

How to reproduce
Steps to reproduce the behavior:

1. Create the project with create-vite
2. Install storefront using npm
3. Try to to build with npx vite build
4. It should fail as described

Expected behavior
It still allows me to compile

Actual behavior
I get the error

Code examples
Sample code (or your configuration) to help us reproduce the bug faster or to understand your use case.

{
  "name": "@jrg/vue-commerce-test",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@storefront-ui/vue": "^0.13.2",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}
<template>
  <div id="home">
    <SfHero class="hero" :slider-options="{ autoplay: false }">
      <SfHeroItem
        v-for="(img, index) in heroes"
        :key="index"
        :image="img.image"
        :title="img.title"
        :subtitle="img.subtitle"
        :button-text="img.buttonText"
        :background="img.background"
        :class="img.className"
      />
    </SfHero>
  </div>
</template>
<script setup>
import {
  SfHero,
  SfHeroItem
} from "@storefront-ui/vue";

const heros = [
        {
          title: "Colorful summer dresses are already in store",
          subtitle: "SUMMER COLLECTION 2020",
          buttonText: "Learn more",
          background: "rgb(236, 239, 241)",
          image: "/assets/storybook/Home/hero.png",
        },
        {
          title: "Colorful summer dresses are already in store",
          subtitle: "SUMMER COLLECTION 2020",
          buttonText: "Learn more",
          background: "rgb(239, 235, 233)",
          image: "/assets/storybook/Home/bannerHM.jpg",
          className:
            "sf-hero-item--position-bg-top-left sf-hero-item--align-right",
        },
        {
          title: "Colorful summer dresses are already in store",
          subtitle: "SUMMER COLLECTION 2020",
          buttonText: "Learn more",
          background: "rgb(236, 239, 241)",
          image: "/assets/storybook/Home/hero.png",
        },
      ]
</script>
<style lang="scss" scoped>
@import "~@storefront-ui/vue/styles";
</style>

┆Issue is synchronized with this Jira Zadanie by Unito

[justyna-13]

At this moment there's no support for Vue 3 but we're working on it so stay tuned :)