1 files changed, 48 insertions, 1 deletions
diff --git a/doc/development/fe_guide/vue3_migration.md b/doc/development/fe_guide/vue3_migration.md
index d06e93da0f3..7da462a5f89 100644
--- a/doc/development/fe_guide/vue3_migration.md
+++ b/doc/development/fe_guide/vue3_migration.md
@@ -8,7 +8,10 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 
 Preparations for a Vue 3 migration are tracked in epic [&3174](https://gitlab.com/groups/gitlab-org/-/epics/3174)
 
-In order to prepare for the eventual migration to Vue 3.x, we should be wary about adding the following features to the codebase:
+In order to prepare for the eventual migration to Vue 3.x, we should not use the following deprecated features in the codebase:
+
+NOTE:
+Our linting rules block the use of these deprecated features.
 
 ## Vue filters
 
@@ -132,3 +135,47 @@ shallowMount(MyAwesomeComponent, {
   }
 })
 ```
+
+## Props default function `this` access
+
+**Why?**
+
+In Vue 3, props default value factory functions no longer have access to `this`
+(the component instance).
+
+**What to use instead**
+
+Write a computed prop that resolves the desired value from other props. This
+will work in both Vue 2 and 3.
+
+```html
+<script>
+export default {
+  props: {
+    metric: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    actualTitle() {
+      return this.title ?? this.metric;
+    },
+  },
+}
+
+</script>
+
+<template>
+  <div>{{ actualTitle }}</div>
+</template>
+```
+
+[In Vue 3](https://v3.vuejs.org/guide/migration/props-default-this.html#props-default-function-this-access),
+the props default value factory is passed the raw props as an argument, and can
+also access injections.