diff --git a/documentation/components/example_display.vue b/documentation/components/example_display.vue
index 6d98b8af305dc6a23a91e958f0cffa51a801f479..db7cc6226cf8c809aa7ad0aa80b0ae9b7e250533 100644
--- a/documentation/components/example_display.vue
+++ b/documentation/components/example_display.vue
@@ -174,21 +174,23 @@ export default {
   <div>
     <div v-if="currentExampleComponent">
       <b-card no-body>
-        <div slot="header">
-          <b-row>
-            <b-col>
-              <strong>{{ exampleName }}</strong>
-            </b-col>
-            <b-col class="text-right">
-              <b-button-group size="sm" class="mx-1">
-                <b-btn v-b-toggle.collapseSource>Source</b-btn>
-                <b-btn v-b-toggle.collapseHTML>HTML</b-btn>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </div>
+        <template #header>
+          <div>
+            <b-row>
+              <b-col>
+                <strong>{{ exampleName }}</strong>
+              </b-col>
+              <b-col class="text-right">
+                <b-button-group size="sm" class="mx-1">
+                  <b-btn v-b-toggle.collapseSource>Source</b-btn>
+                  <b-btn v-b-toggle.collapseHTML>HTML</b-btn>
+                </b-button-group>
+              </b-col>
+            </b-row>
+          </div>
+        </template>
         <b-card-body>
-          <div :is="currentExampleComponent" ref="compiled" />
+          <component :is="currentExampleComponent" ref="compiled" />
         </b-card-body>
         <b-list-group flush>
           <b-collapse id="collapseSource" class="mt-2">
diff --git a/package.json b/package.json
index 48c2ffb1ebf0ec9fd1fadf26f83a9f2ab23ace6c..51cb92e66b94b86348681ebb41ab7cb012cbe7ce 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "8.4.0",
+    "@gitlab/eslint-plugin": "9.0.0",
     "@gitlab/stylelint-config": "2.3.0",
     "@gitlab/svgs": "1.201.0",
     "@rollup/plugin-commonjs": "^11.1.0",
diff --git a/src/components/base/carousel/carousel.vue b/src/components/base/carousel/carousel.vue
index af67e14162ec40a8d063c2b55ad0a6fb97413bc3..f632f24f4be25423bfba0c3a81199c5ab72a2662 100644
--- a/src/components/base/carousel/carousel.vue
+++ b/src/components/base/carousel/carousel.vue
@@ -9,6 +9,8 @@ export default {
 </script>
 <template>
   <b-carousel v-bind="$attrs" v-on="$listeners">
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-carousel>
 </template>
diff --git a/src/components/base/carousel/carousel_slide.vue b/src/components/base/carousel/carousel_slide.vue
index 1d7ce0225313a6d499edbf28ed273a147cfc786d..2aa2e009ef2997cc13c6c1d4ca49e31cdbda2759 100644
--- a/src/components/base/carousel/carousel_slide.vue
+++ b/src/components/base/carousel/carousel_slide.vue
@@ -9,6 +9,8 @@ export default {
 </script>
 <template>
   <b-carousel-slide v-bind="$attrs" v-on="$listeners">
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-carousel-slide>
 </template>
diff --git a/src/components/base/deprecated_dropdown/deprecated_dropdown.vue b/src/components/base/deprecated_dropdown/deprecated_dropdown.vue
index 7ef1943d42e6e9abcfb5a91cb11379b5bd9156e0..2fa75b2dea895f694bb5fc24e42d0ebf0564c17b 100644
--- a/src/components/base/deprecated_dropdown/deprecated_dropdown.vue
+++ b/src/components/base/deprecated_dropdown/deprecated_dropdown.vue
@@ -68,9 +68,11 @@ export default {
 <template>
   <b-dropdown ref="dropdown" class="gl-dropdown" v-bind="$attrs" :split="split" v-on="$listeners">
     <slot></slot>
-    <slot slot="button-content" name="button-content">
-      <span class="gl-dropdown-toggle-text">{{ text }}</span>
-      <gl-icon v-if="renderCaret" class="gl-dropdown-caret" name="chevron-down" />
-    </slot>
+    <template #button-content>
+      <slot name="button-content">
+        <span class="gl-dropdown-toggle-text">{{ text }}</span>
+        <gl-icon v-if="renderCaret" class="gl-dropdown-caret" name="chevron-down" />
+      </slot>
+    </template>
   </b-dropdown>
 </template>
diff --git a/src/components/base/dropdown/dropdown.vue b/src/components/base/dropdown/dropdown.vue
index c2b7d29bd4ed3832ba2828600c7be39b2746e41f..4b1caddd5646f366587d908ac11f232fbef4d9d5 100644
--- a/src/components/base/dropdown/dropdown.vue
+++ b/src/components/base/dropdown/dropdown.vue
@@ -200,13 +200,15 @@ export default {
         <slot name="footer"></slot>
       </div>
     </div>
-    <slot slot="button-content" name="button-content">
-      <gl-loading-icon v-if="loading" class="gl-mr-2" />
-      <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
-      <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
-        <slot name="button-text">{{ buttonText }}</slot>
-      </span>
-      <gl-icon v-if="renderCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
-    </slot>
+    <template #button-content>
+      <slot name="button-content">
+        <gl-loading-icon v-if="loading" class="gl-mr-2" />
+        <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
+        <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+          <slot name="button-text">{{ buttonText }}</slot>
+        </span>
+        <gl-icon v-if="renderCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
+      </slot>
+    </template>
   </b-dropdown>
 </template>
diff --git a/src/components/base/form/form_group/form_group.vue b/src/components/base/form/form_group/form_group.vue
index e0d1d048c202f372bc2bcfb24bb0395a388da281..3ebd6c2784b2c95e00db340e7f9572225e2844ee 100644
--- a/src/components/base/form/form_group/form_group.vue
+++ b/src/components/base/form/form_group/form_group.vue
@@ -54,6 +54,8 @@ export default {
       </gl-form-text>
     </template>
 
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-form-group>
 </template>
diff --git a/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue b/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue
index f0e8dd8e60ada0d91efd0a4dea1f2cbc6d31f33b..f18f84aafe0ad2dd9bf5d2409b41032046c41a24 100644
--- a/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue
+++ b/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue
@@ -14,7 +14,7 @@ export default {
 
 <template>
   <gl-form-select v-model="selected" :options="options">
-    <template slot="first">
+    <template #first>
       <option :value="null" disabled>Select a dish</option>
     </template>
   </gl-form-select>
diff --git a/src/components/base/form/form_select/form_select.vue b/src/components/base/form/form_select/form_select.vue
index db28a656e9b5fef1957de66554932348a38ca51e..06b935326e3a592383b18cb824157f3a25cd4c77 100644
--- a/src/components/base/form/form_select/form_select.vue
+++ b/src/components/base/form/form_select/form_select.vue
@@ -10,6 +10,8 @@ export default {
 </script>
 <template>
   <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-form-select>
 </template>
diff --git a/src/components/base/modal/modal.vue b/src/components/base/modal/modal.vue
index 0bf9fdf9e11c2acb8e1d935ec3f012f6bbfb3f4e..7405171adeab08013cc9daa5083aa01c2acba7b7 100644
--- a/src/components/base/modal/modal.vue
+++ b/src/components/base/modal/modal.vue
@@ -163,8 +163,11 @@ export default {
       </slot>
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <slot slot="modal-ok" name="modal-ok"></slot>
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <slot slot="modal-cancel" name="modal-cancel"></slot>
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <slot slot="modal-footer" name="modal-footer">
       <gl-button
         v-if="actionCancel"
diff --git a/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue b/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue
index 2997348e0cffeb274700c194e34567491c44f00b..24d1b5773b4af60dfffdfcdc00a1dbb70677f3ca 100644
--- a/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue
+++ b/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue
@@ -16,7 +16,7 @@
       { id: 'thud' },
     ]"
   >
-    <template slot-scope="{ listItem }">
+    <template #default="{ listItem }">
       <gl-button variant="success" class="order-1" @click="alert">
         {{ listItem.id }}
       </gl-button>
diff --git a/src/components/base/popover/popover.vue b/src/components/base/popover/popover.vue
index 4c08dfeaca6c06e117a2b4856365d792a3cbb0a2..0367f7ed35f034d7babe1f64bb68b47e719cc866 100644
--- a/src/components/base/popover/popover.vue
+++ b/src/components/base/popover/popover.vue
@@ -39,6 +39,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <template slot="title">
       <slot name="title"></slot>
     </template>
diff --git a/src/components/base/search_box_by_click/search_box_by_click.vue b/src/components/base/search_box_by_click/search_box_by_click.vue
index 8728e4e0eb98a289ca04cc59885344eea279291d..db76f65c97b119027c09fff409e792e0f4f0b0c9 100644
--- a/src/components/base/search_box_by_click/search_box_by_click.vue
+++ b/src/components/base/search_box_by_click/search_box_by_click.vue
@@ -154,7 +154,7 @@ export default {
         category="secondary"
         :disabled="disabled"
       >
-        <template slot="button-content">
+        <template #button-content>
           <gl-icon name="history" class="gl-search-box-by-click-history-icon" />
           <gl-icon name="chevron-down" class="gl-search-box-by-click-history-icon-chevron" />
           <span class="gl-sr-only">Toggle history</span>
diff --git a/src/components/base/table/examples/table.custom_fields.example.vue b/src/components/base/table/examples/table.custom_fields.example.vue
index 7d07ccb1b627e95d58dad7a61fa747bb78ab4d5b..97075125c7887d0874dcdbb9e8b2486d3e35c2f4 100644
--- a/src/components/base/table/examples/table.custom_fields.example.vue
+++ b/src/components/base/table/examples/table.custom_fields.example.vue
@@ -5,9 +5,13 @@ export default {
       key: 'column_one',
       label: 'Column One',
     },
+    {
+      key: 'col_2',
+      label: 'Styled Column 2',
+    },
     {
       key: 'custom_markup',
-      label: 'Column 2',
+      label: 'Styled Virtual Column',
     },
   ],
   items: [
@@ -29,10 +33,11 @@ export default {
 
 <template>
   <gl-table :items="$options.items" :fields="$options.fields">
-    <template slot="custom_markup" slot-scope="items">
-      <div class="text-primary">
-        {{ items.item.col_2 }}
-      </div>
+    <template #cell(col_2)="{ value }">
+      <span class="gl-font-weight-bold gl-text-green-500">{{ value }}</span>
+    </template>
+    <template #cell(custom_markup)="{ index }">
+      <span class="gl-font-style-italic gl-text-red-500">Index: {{ index + 1 }}</span>
     </template>
   </gl-table>
 </template>
diff --git a/src/components/base/table/table.vue b/src/components/base/table/table.vue
index 232f1dfc91622f5055d1b3a6cbdada188f68a860..923b9e0055ff7223379c31b0c1f9510e8d622669 100644
--- a/src/components/base/table/table.vue
+++ b/src/components/base/table/table.vue
@@ -11,9 +11,7 @@ export default {
 
 <template>
   <b-table class="gl-table" v-bind="$attrs" v-on="$listeners">
-    <!-- This allows us to pass all slots and scoped slots to the bootstrap vue table's slots -->
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
-    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
+    <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <slot :name="slot" v-bind="scope"></slot>
     </template>
   </b-table>
diff --git a/src/components/base/tabs/tab/tab.vue b/src/components/base/tabs/tab/tab.vue
index 60f4699488ce9bae1e74c62d4a2f845ce83ed385..d245b66473f35273de6a8f58876f28077d99078f 100644
--- a/src/components/base/tabs/tab/tab.vue
+++ b/src/components/base/tabs/tab/tab.vue
@@ -43,6 +43,8 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-tab>
 </template>
diff --git a/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue b/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue
index b14d0182bf25af13265af6cbb9d32bdde8f7878a..06b36668c75cb14c77f862ffd40e3549e17ca569 100644
--- a/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue
+++ b/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue
@@ -1,21 +1,21 @@
 <template>
   <gl-tabs>
     <gl-tab>
-      <template slot="title">
+      <template #title>
         <span>1st</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
       </template>
       first content
     </gl-tab>
     <gl-tab>
-      <template slot="title">
+      <template #title>
         <span>2nd</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
       </template>
       second content
     </gl-tab>
     <gl-tab>
-      <template slot="title">
+      <template #title>
         <span>3rd</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
       </template>
diff --git a/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue b/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue
index dca343969f83eb1ad7ec34e8ad7eaea6bf484060..4169853f0879bd0f789badc54ebd21300367b3fb 100644
--- a/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue
+++ b/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue
@@ -1,7 +1,7 @@
 <template>
   <gl-tabs>
     <gl-tab title="First">
-      <template slot="title"><i>custom</i> <strong>Title</strong></template>
+      <template #title><i>custom</i> <strong>Title</strong></template>
       first content
     </gl-tab>
     <gl-tab title="Second">second content</gl-tab>
diff --git a/src/components/base/tabs/tabs/scrollable_tabs.vue b/src/components/base/tabs/tabs/scrollable_tabs.vue
index a843510c15db7acbf479056ee6d34e1cccae84f1..30c5e531462b4181ef003d70c48ab4a1d4f3928a 100644
--- a/src/components/base/tabs/tabs/scrollable_tabs.vue
+++ b/src/components/base/tabs/tabs/scrollable_tabs.vue
@@ -107,7 +107,9 @@ export default {
     v-bind="passthroughAttrs"
     v-on="$listeners"
   >
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
     <template #tabs-start>
       <li v-show="displayScrollLeft" class="gl-tabs-fade gl-tabs-fade-left">
         <button
diff --git a/src/components/base/tabs/tabs/tabs.stories.js b/src/components/base/tabs/tabs/tabs.stories.js
index a0c64e70e610a4119c5bb413f7af4fd35a5902cf..1130b2f5d18e34d21e9e9ac99f5f67280e0e112a 100644
--- a/src/components/base/tabs/tabs/tabs.stories.js
+++ b/src/components/base/tabs/tabs/tabs.stories.js
@@ -148,21 +148,21 @@ documentedStoriesOf('base/tabs/tabs', docs)
     template: `
       <gl-tabs>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span>1st</span>
             <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
           </template>
           first content
         </gl-tab>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span>2nd</span>
             <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
           </template>
           second content
         </gl-tab>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span>3rd</span>
           </template>
           third content
diff --git a/src/components/base/tabs/tabs/tabs.vue b/src/components/base/tabs/tabs/tabs.vue
index 52164d987ae887a0f7565cf3fabef69b67d8385f..3188070dbc659fbbc3e2157859ee731d30fa08a1 100644
--- a/src/components/base/tabs/tabs/tabs.vue
+++ b/src/components/base/tabs/tabs/tabs.vue
@@ -223,7 +223,9 @@ export default {
     v-bind="$attrs"
     v-on="listeners"
   >
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
 
     <template v-if="hasActions" #tabs-start>
       <div data-testid="actions-tabs-start" class="gl-actions-tabs-start">
diff --git a/src/components/charts/area/area.vue b/src/components/charts/area/area.vue
index 6fed696041c8a0e46ab5a3b2d61ef15439ff1adc..1e25238fec1d06c50e4aab954d03405bed673cbe 100644
--- a/src/components/charts/area/area.vue
+++ b/src/components/charts/area/area.vue
@@ -342,6 +342,7 @@ export default {
       :left="annotationsTooltipPosition.left"
       placement="bottom"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ annotationsTooltipTitle }}</div>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
@@ -356,10 +357,12 @@ export default {
       :left="dataTooltipPosition.left"
     >
       <template v-if="formatTooltipText">
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <slot slot="title" name="tooltip-title"></slot>
         <slot name="tooltip-content"></slot>
       </template>
       <template v-else>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title">
           {{ dataTooltipTitle }}
           <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
diff --git a/src/components/charts/bar/bar.vue b/src/components/charts/bar/bar.vue
index 3b63ad419f222d558a752261dfdf101a5ca43eac..70391fe84404b283b8ed5a921fd2a99a06fafd5a 100644
--- a/src/components/charts/bar/bar.vue
+++ b/src/components/charts/bar/bar.vue
@@ -238,6 +238,7 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ tooltipTitle }} ({{ yAxisTitle }})</div>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
diff --git a/src/components/charts/column/column.vue b/src/components/charts/column/column.vue
index 4f0a1286b5b14abd8eb67a782a9e800d01ae87ee..486365450506bbacd46fbfcb56d62eb5fae50d9e 100644
--- a/src/components/charts/column/column.vue
+++ b/src/components/charts/column/column.vue
@@ -203,6 +203,7 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
diff --git a/src/components/charts/discrete_scatter/discrete_scatter.vue b/src/components/charts/discrete_scatter/discrete_scatter.vue
index d4ff54678c020bed014ab5a7fe4ddcb64f960eab..bf2f24a84dbe1a5b22d4fe0c0c76f83867e1919e 100644
--- a/src/components/charts/discrete_scatter/discrete_scatter.vue
+++ b/src/components/charts/discrete_scatter/discrete_scatter.vue
@@ -175,10 +175,12 @@ export default {
       :left="tooltipPosition.left"
     >
       <template v-if="formatTooltipText">
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <slot slot="title" name="tooltip-title"></slot>
         <slot name="tooltip-content"></slot>
       </template>
       <template v-else>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
         <tooltip-default-format :tooltip-content="tooltipContent" />
       </template>
diff --git a/src/components/charts/line/line.vue b/src/components/charts/line/line.vue
index a106f5738ce1bfce46b63c72ed445e5ecebc07a8..e7fe3e3193dac7f904a96dffdd7d4afad8f50f55 100644
--- a/src/components/charts/line/line.vue
+++ b/src/components/charts/line/line.vue
@@ -339,6 +339,7 @@ export default {
       :left="annotationsTooltipPosition.left"
       placement="bottom"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ annotationsTooltipTitle }}</div>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
@@ -353,10 +354,12 @@ export default {
       :left="dataTooltipPosition.left"
     >
       <template v-if="formatTooltipText">
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <slot slot="title" name="tooltip-title"></slot>
         <slot name="tooltip-content"></slot>
       </template>
       <template v-else>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title">
           {{ dataTooltipTitle }}
           <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
diff --git a/src/components/charts/sparkline/sparkline.vue b/src/components/charts/sparkline/sparkline.vue
index bd4408448c902f1bea595d6b9aa7fb9b83563a61..790c1d7391ae8f23bafec9d387fc05645fef6f07 100644
--- a/src/components/charts/sparkline/sparkline.vue
+++ b/src/components/charts/sparkline/sparkline.vue
@@ -205,7 +205,9 @@ export default {
         :style="{ pointerEvents: 'none' }"
         placement="top"
       >
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title" class="js-tooltip-title text-nowrap">{{ tooltip.title }}</div>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="default" class="js-tooltip-content d-flex">
           <span v-if="tooltipLabel" class="pr-4 mr-auto">{{ tooltipLabel }}</span>
           <strong>{{ tooltip.content }}</strong>
diff --git a/src/components/charts/stacked_column/stacked_column.vue b/src/components/charts/stacked_column/stacked_column.vue
index 90142fa2a8e964fff7555f1108ca1f72c1ad7c5b..d198e6828767124117777a4d62644a350cb7a017 100644
--- a/src/components/charts/stacked_column/stacked_column.vue
+++ b/src/components/charts/stacked_column/stacked_column.vue
@@ -290,6 +290,7 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
diff --git a/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue b/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue
index 6e78f32a6c862b4d5eba5b37af08b5b512a2342f..b060e518470a88b96dc553e66b7eca8d2bafb798 100644
--- a/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue
+++ b/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue
@@ -23,7 +23,9 @@ export default {
       top="50%"
       left="0px"
     >
-      <div slot="title">Tooltip Title</div>
+      <template #title>
+        <div>Tooltip Title</div>
+      </template>
       Basic Tooltip Content
     </gl-chart-tooltip>
   </div>
diff --git a/src/components/charts/tooltip/tooltip.vue b/src/components/charts/tooltip/tooltip.vue
index 9a041ae5aa6b877bfec9ebbe5c65a840c97aa045..47fbddf48ede358de5ee978679189bbfd162ae6d 100644
--- a/src/components/charts/tooltip/tooltip.vue
+++ b/src/components/charts/tooltip/tooltip.vue
@@ -81,6 +81,7 @@ export default {
       This is why `triggers` is currently set to an empty string
     -->
     <gl-popover v-bind="$attrs" :target="containerId" :container="containerId" triggers="">
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <slot slot="title" name="title"></slot>
       <slot></slot>
     </gl-popover>
diff --git a/yarn.lock b/yarn.lock
index 365ba54e5b1a1cb0bf6fbef1e11546fe2600336c..ff2558042544ece97b725ca608b8570555a55ef4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1239,10 +1239,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@gitlab/eslint-plugin@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-8.4.0.tgz#094fa4d41676a71146f82e1b19257a7ceabefd88"
-  integrity sha512-VE/c1yIMrj2igJWAALQtAKpnXL8fN5wJ1uKteZfi8xYbWouoUK6hizXSPrrEUWiM2FqcBI4Igcpz2JlJzDlAnA==
+"@gitlab/eslint-plugin@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-9.0.0.tgz#0c872428e3237e0dbd2cbbe74317fc3786cefdf9"
+  integrity sha512-TaKLzaAFQbsJJIbetLTARkJNapIWuis8RyOp/arbVS5Fl8IjBK8m3hPmqIc5CwOz9qK8o5eSW1MA9clU/dLY3w==
   dependencies:
     babel-eslint "^10.0.3"
     eslint-config-airbnb-base "^14.2.1"