Recently I came across vue-error-boundary which I like the idea of very much and would like to implement it into my own projects.

I want to use vue-error-boundary features to load a component with an error instead of crashing my app. However for some reason all I can do is get the on-error prop to work, component GETS loaded but with a warning and the App still Crushes.

For Reproduction purpose: CodeSandbox

I get following error:

Vue warn]: Unhandled error during execution of render function 
  at <ImUnstable> 
  at <VErrorBoundary on-error=fn<bound TriggerMe> fall-back= 
{render: ƒ render(), __hmrId: "6505c1f8", __file: "src/components/ContactError.vue"}
> 

CODE:

App.vue:

<template>
  <VErrorBoundary :on-error="TriggerMe" :fall-back="fallBack">
    <ImUnstable />
  </VErrorBoundary>
</template>

<script>
import { markRaw } from "vue";
import VErrorBoundary from "vue-error-boundary";
import ImUnstable from "@/components/ImUnstable.vue";
import ContactError from "@/components/ContactError";
export default {
  components: {
    ImUnstable,
    VErrorBoundary,
  },
  name: "App",
  data() {
    return {
      fallBack: markRaw(ContactError),
    };
  },
  methods: {
    TriggerMe() {
      console.log("It Triggered");
    },
  },
};
</script>

ImUnstable.vue:

<template>
  <div v-for="user in users" :key="user.id">
    <p>
      {{ user.name }}
      {{ makeLarge(user.surname) }}
      {{ user.age }}
    </p>
  </div>
</template>

<script>
export default {
  errorCaptured() {
    console.log("let me see");
  },
  data() {
    return {
      users: [
        { id: 1, name: "Luke", surname: "Skywalker", age: "22" },
        { id: 2, name: "Han", surname: {}, age: "35" },
      ],
    };
  },
  methods: {
    makeLarge(data) {
      return data.toUpperCase();
    },
  },
};
</script>

ContactError.vue:

<template>
  <div>
    <p>There was an issue obtaining contact's information.</p>
  </div>
</template>