diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
deleted file mode 100644
index 7733fb74afe..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import statusIcon from '../mr_widget_status_icon.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
-import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
-
-export default {
-  name: 'MRWidgetMissingBranch',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  directives: {
-    tooltip,
-  },
-  components: {
-    'mr-widget-merge-help': mrWidgetMergeHelp,
-    statusIcon,
-  },
-  computed: {
-    missingBranchName() {
-      return this.mr.sourceBranchRemoved ? 'source' : 'target';
-    },
-    message() {
-      return `If the ${this.missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line`;
-    },
-  },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="true" />
-      <div class="media-body space-children">
-        <span class="bold js-branch-text">
-          <span class="capitalize">
-            {{missingBranchName}}
-          </span> branch does not exist.
-          Please restore it or use a different {{missingBranchName}} branch
-          <i
-            v-tooltip
-            class="fa fa-question-circle"
-            :title="message"
-            :aria-label="message"></i>
-        </span>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
new file mode 100644
index 00000000000..718c0e4b3c6
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -0,0 +1,62 @@
+<script>
+  import { sprintf, s__ } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import statusIcon from '../mr_widget_status_icon.vue';
+  import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
+
+  export default {
+    name: 'MRWidgetMissingBranch',
+    directives: {
+      tooltip,
+    },
+    components: {
+      mrWidgetMergeHelp,
+      statusIcon,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      missingBranchName() {
+        return this.mr.sourceBranchRemoved ? 'source' : 'target';
+      },
+      missingBranchNameMessage() {
+        return sprintf(s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'), {
+          missingBranchName: this.missingBranchName,
+        });
+      },
+      message() {
+        return sprintf(s__('mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line'), {
+          missingBranchName: this.missingBranchName,
+        });
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="true"
+    />
+
+    <div class="media-body space-children">
+      <span class="bold js-branch-text">
+        <span class="capitalize">
+          {{ missingBranchName }}
+        </span> {{ s__("mrWidget|branch does not exist.") }}
+        {{ missingBranchNameMessage }}
+        <i
+          v-tooltip
+          class="fa fa-question-circle"
+          :title="message"
+          :aria-label="message"
+        >
+        </i>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 7ca15537719..5517888c3b1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -24,7 +24,7 @@ export { default as WipState } from './components/states/mr_widget_wip';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
 export { default as NothingToMergeState } from './components/states/mr_widget_nothing_to_merge';
-export { default as MissingBranchState } from './components/states/mr_widget_missing_branch';
+export { default as MissingBranchState } from './components/states/mr_widget_missing_branch.vue';
 export { default as NotAllowedState } from './components/states/mr_widget_not_allowed';
 export { default as ReadyToMergeState } from './components/states/mr_widget_ready_to_merge';
 export { default as SHAMismatchState } from './components/states/mr_widget_sha_mismatch';
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
index 720effb5c1c..3d7f4abd420 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
@@ -1,38 +1,22 @@
 import Vue from 'vue';
-import missingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch';
-
-const createComponent = () => {
-  const Component = Vue.extend(missingBranchComponent);
-  const mr = {
-    sourceBranchRemoved: true,
-  };
-
-  return new Component({
-    el: document.createElement('div'),
-    propsData: { mr },
-  });
-};
+import missingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('MRWidgetMissingBranch', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const mrProp = missingBranchComponent.props.mr;
+  let vm;
 
-      expect(mrProp.type instanceof Object).toBeTruthy();
-      expect(mrProp.required).toBeTruthy();
-    });
+  beforeEach(() => {
+    const Component = Vue.extend(missingBranchComponent);
+    vm = mountComponent(Component, { mr: { sourceBranchRemoved: true } });
   });
 
-  describe('components', () => {
-    it('should have components added', () => {
-      expect(missingBranchComponent.components['mr-widget-merge-help']).toBeDefined();
-    });
+  afterEach(() => {
+    vm.$destroy();
   });
 
   describe('computed', () => {
     describe('missingBranchName', () => {
       it('should return proper branch name', () => {
-        const vm = createComponent();
         expect(vm.missingBranchName).toEqual('source');
 
         vm.mr.sourceBranchRemoved = false;
@@ -43,7 +27,7 @@ describe('MRWidgetMissingBranch', () => {
 
   describe('template', () => {
     it('should have correct elements', () => {
-      const el = createComponent().$el;
+      const el = vm.$el;
       const content = el.textContent.replace(/\n(\s)+/g, ' ').trim();
 
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();