Extract VulnerabilityDetail functional component

Now that the details are rendered explicitly, the markup had a lot of
duplication. This abstracts that duplication into a functional
component.

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue

+<script>
+export default {
+  name: 'VulnerabilityDetail',
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template functional>
+  <div class="d-sm-flex my-sm-2 my-4">
+    <label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
+    <div class="col-sm-10 pl-0 text-secondary">
+      <slot></slot>
+    </div>
+  </div>
+</template>

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VulnerabilityDetail component renders the label prop and default slot 1`] = `
+<div
+  class="d-sm-flex my-sm-2 my-4"
+>
+  <label
+    class="col-sm-2 text-sm-right font-weight-bold pl-0"
+  >
+    foo:
+  </label>
+   
+  <div
+    class="col-sm-10 pl-0 text-secondary"
+  >
+    <p>
+      bar
+    </p>
+  </div>
+</div>
+`;

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_detail_spec.js

+import { shallowMount } from '@vue/test-utils';
+import VulnerabilityDetail from 'ee/vue_shared/security_reports/components/vulnerability_detail.vue';
+
+describe('VulnerabilityDetail component', () => {
+  let wrapper;
+
+  const factory = ({ propsData, defaultSlot }) => {
+    wrapper = shallowMount(VulnerabilityDetail, {
+      propsData,
+      slots: {
+        default: defaultSlot,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the label prop and default slot', () => {
+    factory({ propsData: { label: 'foo' }, defaultSlot: '<p>bar</p>' });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});