diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
index dc5c5ba333acbdbe71e4a749dddc88a20243e6d5..59d574afad58e1a960f6f4c4b59a909430649d91 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_link_child.vue
@@ -17,6 +17,7 @@ import WorkItemLinkChildContents from '../shared/work_item_link_child_contents.v
 import WorkItemTreeChildren from './work_item_tree_children.vue';
 
 export default {
+  name: 'WorkItemLinkChild',
   components: {
     GlButton,
     WorkItemTreeChildren,
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue
index af181fa4e7e95551f8c9af85eee01d76b54ff2e5..791ae66c7209a9c9fbb34ae221c3eae42d0bce87 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_tree_children.vue
@@ -28,6 +28,16 @@ export default {
       default: true,
     },
   },
+  methods: {
+    onClick(event, child) {
+      // To avoid incorrect work item to be bubbled up
+      // Assign the correct child item
+      if (!event.childItem) {
+        Object.assign(event, { childItem: child });
+      }
+      this.$emit('click', event);
+    },
+  },
 };
 </script>
 
@@ -42,7 +52,7 @@ export default {
       :work-item-type="workItemType"
       :show-labels="showLabels"
       @removeChild="$emit('removeChild', $event)"
-      @click="$emit('click', Object.assign($event, { childItem: child }))"
+      @click="onClick($event, child)"
     />
   </div>
 </template>
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_tree_children_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_tree_children_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4b546fd594bb260de8b17e5db88df6640fc438b
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_links/work_item_tree_children_spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import WorkItemTreeChildren from '~/work_items/components/work_item_links/work_item_tree_children.vue';
+import WorkItemLinkChild from '~/work_items/components/work_item_links/work_item_link_child.vue';
+import { childrenWorkItems } from '../../mock_data';
+
+describe('WorkItemTreeChildren', () => {
+  let wrapper;
+
+  const createComponent = ({ children = childrenWorkItems } = {}) => {
+    wrapper = shallowMount(WorkItemTreeChildren, {
+      propsData: {
+        workItemType: 'Objective',
+        workItemId: 'gid:://gitlab/WorkItem/1',
+        children,
+        canUpdate: true,
+        showLabels: true,
+      },
+    });
+  };
+
+  const findWorkItemLinkChildItems = () => wrapper.findAllComponents(WorkItemLinkChild);
+  const findWorkItemLinkChildItem = () => findWorkItemLinkChildItems().at(0);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders all WorkItemLinkChildItems', () => {
+    expect(findWorkItemLinkChildItems().length).toBe(4);
+  });
+
+  it('emits childItem from WorkItemLinkChildItems on `click` event', () => {
+    const event = {
+      childItem: 'gid://gitlab/WorkItem/2',
+    };
+
+    findWorkItemLinkChildItem().vm.$emit('click', event);
+
+    expect(wrapper.emitted('click')).toEqual([[{ childItem: 'gid://gitlab/WorkItem/2' }]]);
+  });
+
+  it('emits immediate childItem on `click` event', () => {
+    const event = expect.anything();
+
+    findWorkItemLinkChildItem().vm.$emit('click', event);
+
+    expect(wrapper.emitted('click')).toEqual([[{ childItem: 'gid://gitlab/WorkItem/2' }]]);
+  });
+});