Vue Freezable

Freezable.vue

<script>
let instancesCount = 0;
const rendersCache = {};

// See live example: https://x3t7g.codesandbox.io/
export default {
  props: {
    tag: {
      type: String,
      default: "div"
    },
    frozen: {
      type: Boolean,
      default: false
    },
    frozenProps: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      uuid: instancesCount++
    };
  },
  destroyed() {
    delete rendersCache[this.uuid];
  },
  methods: {
    renderChildren(h, children) {
      return h(this.tag, {}, children);
    }
  },
  render(h) {
    if (this.frozen) {
      return this.renderChildren(h, rendersCache[this.uuid] || []);
    }

    rendersCache[this.uuid] = this.$scopedSlots.default
      ? this.$scopedSlots.default(this.frozenProps)
      : this.$slots.default;

    return this.renderChildren(h, rendersCache[this.uuid] || []);
  }
};
</script>

Example without freezable:

Example with freezable:

See a live example here: https://codesandbox.io/s/vue-freezable-x3t7g