Vue 3 + Vite - Reactivity (computed) is lost when importing remote module

[kristremblay]

Versions

• vite-plugin-federation: latest
• vite: latest

Note: I have already tried downgrading and reinstalling node modules.

Reproduction

1. Create 2 new Vue 3 apps with Vite (TS); one for host and one for remote

Host config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'

// https://vitejs.dev/config/
export default defineConfig({
  preview: {
    port: 5004,
  },
  plugins: [
    vue(),
    federation({
      name: 'peaches-counter',
      remotes: {
        peaches_counter: 'http://localhost:5005/assets/peaches-counter.js'
      }
    }),
  ],
})

Remote config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
import topLevelAwait from 'vite-plugin-top-level-await'

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    target: 'es2022',
  },
  preview: {
    port: 5005,
  },
  plugins: [
    vue(),
    federation({
      name: 'peaches-counter',
      filename: 'peaches-counter.js',
      exposes: {
        './App': './src/App.vue',
      },
      shared: ['vue'],
    }),
    topLevelAwait(),
  ],
})

2. Update Remote App.vue to:

<script setup lang="ts">
import { ref, computed } from 'vue'
const count = ref(0)

const increment = () => {
  count.value += 1;
}

const peaches = computed(() => {
  return Array(count.value).fill(null)
})
</script>

<template>
  <button type="button" @click="increment">🍑</button>
  <p>
    <span v-for="(_, key) in peaches" :key="key">
      Peaches
    </span>
  </p>
</template>

<style scoped>
p {
  color: #ffe6e6;
}
</style>

3. Update Host App.vue to:

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const RemoteComponent = defineAsyncComponent(() => import('peaches_counter/App'));

</script>

<template>
  <h1>This is the host</h1>
  <RemoteComponent />
</template>

<style scoped>
h1 {
  color: purple;
}
</style>

What is Expected?

• Remote module will appear
• Remote module will update accordingly when interacted with

What is actually happening?

✅ Remote module is appearing
❌ Remote module does not update when interacted with. Event handler IS working, and ref is updating, however the computed property does not work. It works if you load the remote app on its own, but not in federation.

There are a couple of open tickets about this, but they seem abandoned with no satisfactory resolution.

[kristremblay]

I realized immediately after posting this that the host was missing the 'shared' property. Adding shared: ['vue'] resolves this.