/* TestComponent.vue */

<template>
  <div v-if="canShow">
    I'm TestComponent
  </div>
</template>

<script>
export default {
  props: {
    canShow: {
      type: Boolean,
      required: true,
    },
  },
};
</script>

/* TestWrapper.vue */

<template>
  <div>
    <!-- В этом случае canShow будет равен true внутри TestComponent -->
    <TestComponent canShow="" />

    <!-- Этот пример аналогичен предыдущему, vue-template-compiler выставит пустую строку для нашего prop'а -->
    <TestComponent canShow />

    <!-- Тут canShow тоже равен true -->
    <TestComponent canShow="can-show" />
  </div>
</template>

<script>
import TestComponent from 'path/to/TestComponent';

export default {
  components: {
    TestComponent,
  },
};
</script>

<template>
  <div>
    <div
      v-for="(file, idx) in files"
      :key="file.id"
      :ref="`file_${idx}`"
    >
      {{ file.name }}

      <button @click="logDOMElement(idx)">
        Log DOM element
      </button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('files'),
  },

  methods: {
    logDOMElement(idx) {
      console.log(this.$refs[`file_{idx}`]);
    },
  },
};
</script>

<template>
  <div>
    <div
      v-for="(file, idx) in files"
      :key="file.id"
      :data-file-idx="idx"
    >
      {{ file.name }}

      <button @click="logDOMElement(idx)">
        Log DOM element
      </button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('files'),
  },

  methods: {
    logDOMElement(idx) {
      const fileEl = this.$el.querySelector(`*[data-file-idx=${idx}]`);

      console.log(fileEl);
    },
  },
};
</script>

/* TestComponent.vue */

<template>
  <div>
    <!-- ... -->
    <div key="container">
      <TestMount />
    </div>
    <!-- ... -->
  </div>
</template>

 /* ... */

/* CustomColumn.js */

export default {
  render() {
    return null;
  },

  props: {
    label: {
      type: String,
      required: true,
    },
  },

  mounted() {
    // Передаем в компонент CustomTable необходимые данные
    this.$parent.setColumnData({
      label: this.label,
      createCell: this.$scopedSlots.default,
    });
  },
};

/* CustomTable.js */
/* Использется JSX, так как в template не получится использовать метод createCell, переданный из CustomColumn.js */

export default {
  render() {
    const { columnsData, items } = this;
    const { default: defaultSlot } = this.$slots;

    return (
      <div>
        // Создаем элементы CustomColumn
        {defaultSlot}

        <table>
          // Создаем хедер
          <tr>
            {columnsData.map(columnData => (
              <td key={columnData.label}>
                {columnData.label}
              </td>
            ))}
          </tr>

          // Создаем строки таблицы
          {items.map(item => (
            <tr>
              {columnsData.map(columnData => (
                <td key={columnData.label}>
                  {columnData.createCell(item)}
                </td>
              ))}
            </tr>
          ))}
        </table>
      </div>
    );
  },

  props: {
    items: {
      type: Array,
      required: true,
    },
  },

  data() {
    return {
      columnsData: [],
    };
  },

  methods: {
    setColumnData(columnData) {
      this.columnsData.push(columnData);
    },
  },
};

• Хранилище данных о порталах
• Компонент Portal, который добавляет данные в хранилище
• Компонент PortalTarget, который извлекает данные из хранилища и отображает их

/* dataBus.js */
/* Файл содержит реактивное хранилище данных */

import Vue from 'vue';

const bus = new Vue({
  data() {
    return {
      portalDatas: [],
    };
  },

  methods: {
    setPortalData(portalData) {
      const { portalDatas } = this;

      const portalDataIdx = portalDatas.findIndex(
        pd => pd.id === portalData.id,
      );

      if (portalDataIdx === -1) {
        portalDatas.push(portalData);

        return;
      }

      portalDatas.splice(portalDataIdx, 1, portalData);
    },

    removePortalData(portalDataId) {
      const { portalDatas } = this;

      const portalDataIdx = portalDatas.findIndex(
        pd => pd.id === portalDataId,
      );

      if (portalDataIdx === -1) {
        return;
      }

      portalDatas.splice(portalDataIdx, 1);
    },

    getPortalData(portalName) {
      const { portalDatas } = this;

      const portalData = portalDatas.find(pd => pd.to === portalName);

      return portalData || null;
    },
  },
});

export default bus;

/* Portal.vue */
/* Этот компонент передает данные в dataBus */

import dataBus from './dataBus';

let currentId = 0;

export default {
  props: {
    to: {
      type: String,
      required: true,
    },
  },

  computed: {
    // Уникальный id компонента.
    // Нужен для идентификации данных в dataBus
    id() {
      return currentId++;
    },
  },

  render() {
    return null;
  },

  created() {
    this.setPortalData();
  },
 
  // Подхватываем изменение слотов
  updated() {
    this.setPortalData();
  },

  methods: {
    setPortalData() {
      const { to, id } = this;
      const { default: portalEl } = this.$slots;

      dataBus.setPortalData({
        to,
        id,
        portalEl,
      });
    },
  },

  beforeDestroy() {
    dataBus.removePortalData(this.id);
  },
};

/* PortalTarget.vue */
/* Компонент извлекает и отображает данные */

import dataBus from './dataBus';

export default {
  props: {
    name: {
      type: String,
      required: true,
    },
  },

  render() {
    const { portalData } = this;

    if (!portalData) {
      return null;
    }

    return (
      <div class="portal-target">
        {portalData.portalEl}
      </div>
    );
  },

  computed: {
    portalData() {
      return dataBus.getPortalData(this.name);
    },
  },
};

/* ItemView.vue */

<template>
  <!-- ... -->
</template>

<script>
import getItemFromApi from 'path/to/getItemFromApi';

export default {
  /* .... */

  async mounted() {
    const item = await getItemFromApi();
    Object.freeze(item);

    this.item = item;
  },
};
</script>

/* ItemView.vue */

<template>
  <!-- ... -->
</template>

<script>
import Vue from 'vue';
import getItemFromApi from 'path/to/getItemFromApi';

const Observer = new Vue()
  .$data
  .__ob__
  .constructor;

export default {
  /* .... */

  async mounted() {
    const item = await getItemFromApi();

    // Добавляем пустой Observer для объекта
    item.__ob__ = new Observer({});

    this.item = item;
  },
};
</script>

<template>
  <!-- ... -->
</template>

<script>
export default {
  /* ... */

  methods: {
    logAndClean() {
      const { item } = this;

      if (!item) {
        return;
      }

      console.log(item.value);

      this.item = null;
    },
  },
};
</script>