diff --git a/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.vue b/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.vue
index 6e1a449a..9f87ca7c 100644
--- a/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.vue
+++ b/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.vue
@@ -42,7 +42,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { ObserveVisibility } from 'vue-observe-visibility'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BlockText from './../BlockText/BlockText.vue'
 
@@ -56,9 +55,6 @@ export default defineComponent({
     BaseHeading,
     BlockText
   },
-  directives: {
-    ObserveVisibility
-  },
   props: {
     descriptionHeading: {
       type: String,
diff --git a/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.vue b/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.vue
index ccf764a9..1ad85ffb 100644
--- a/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.vue
+++ b/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.vue
@@ -169,7 +169,6 @@ import type { DebouncedFunc } from 'lodash'
 import type { Slide } from './MissionDetailHighlightsCarouselItem.vue'
 // @ts-ignore
 import anime from 'animejs'
-import { ObserveVisibility } from 'vue-observe-visibility'
 import MissionDetailHighlightsCarousel from './MissionDetailHighlightsCarousel.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
@@ -179,9 +178,6 @@ export default defineComponent({
     BaseHeading,
     MissionDetailHighlightsCarousel
   },
-  directives: {
-    ObserveVisibility
-  },
   props: {
     missionTitle: {
       type: String,