Teleport variables.

TeleportVariable.jsx

export default {
  name: "TeleportVariable",
  inheritAttrs: false, // Must set as `false`. Or you will see your bindings existed on your slot DOM attributes, as data="[object Object]"
  render () {
    return this.$scopedSlots.default(this.$attrs);
  }
};

Can use as below:

<template>
  <div id="app">
    <teleport-variable :data="data" :data1="data">
      <template v-slot:default="{ data: { products, names, ...others }, data1 }">
        <div>
          <p>{{ products.toString() }}</p>
          <p>{{ names.foo }}</p>
          <p>{{ others.test1 }}</p>
          <p>{{ others.test2 }}</p>
          <p>{{ data1.products }}</p>
        </div>
      </template>
    </teleport-variable>
  </div>
</template>

<script>
import TeleportVariable from "./components/TeleportVariable.jsx";

export default {
  name: "App",
  components: {
    TeleportVariable,
  },
  data() {
    return {
      data: {
        products: [1, 2, 3, 4],
        names: {
          test: "test",
          foo: "bar",
        },
        test1: "test1",
        test2: "test2",
      },
    };
  },
};
</script>

Demo: https://codesandbox.io/s/hungry-johnson-hveo4