diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
index c2dcdebe821b65cd5c853134094588e22655af04..53c39f14313382c42ade5b93b3c4f2b065740664 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
@@ -91,14 +91,14 @@ export default {
     externalAuthor() {
       return this.issuable.externalAuthor;
     },
-    webUrl() {
-      return this.issuable.gitlabWebUrl || this.issuable.webUrl;
+    issuableLinkHref() {
+      return this.issuable.webPath || this.issuable.gitlabWebUrl || this.issuable.webUrl;
     },
     authorId() {
       return getIdFromGraphQLId(this.author.id);
     },
     isIssuableUrlExternal() {
-      return isExternal(this.webUrl ?? '');
+      return isExternal(this.issuableLinkHref ?? '');
     },
     reference() {
       return this.issuable.reference || `${this.issuableSymbol}${this.issuable.iid}`;
@@ -190,7 +190,7 @@ export default {
       );
     },
     issuableNotesLink() {
-      return setUrlFragment(this.webUrl, 'notes');
+      return setUrlFragment(this.issuableLinkHref, 'notes');
     },
     statusBadgeVariant() {
       if (this.isMergeRequest && this.isClosed) {
@@ -238,7 +238,7 @@ export default {
         return;
       }
       e.preventDefault();
-      this.$emit('select-issuable', { iid: this.issuableIid, webUrl: this.webUrl });
+      this.$emit('select-issuable', { iid: this.issuableIid, webUrl: this.issuableLinkHref });
     },
   },
 };
@@ -289,7 +289,7 @@ export default {
         <gl-link
           class="issue-title-text"
           dir="auto"
-          :href="webUrl"
+          :href="issuableLinkHref"
           data-testid="issuable-title-link"
           v-bind="issuableTitleProps"
           @click="handleIssuableItemClick"
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
index e898b3977d8a20166e194666f785058ea9d7148b..7aee325b2667334c8257a8ab28df6a1137a47b7d 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
@@ -274,17 +274,21 @@ describe('IssuableItem', () => {
 
   describe('template', () => {
     it.each`
-      gitlabWebUrl           | webUrl                        | expectedHref                  | expectedTarget
-      ${undefined}           | ${`${MOCK_GITLAB_URL}/issue`} | ${`${MOCK_GITLAB_URL}/issue`} | ${undefined}
-      ${undefined}           | ${'https://jira.com/issue'}   | ${'https://jira.com/issue'}   | ${'_blank'}
-      ${'/gitlab-org/issue'} | ${'https://jira.com/issue'}   | ${'/gitlab-org/issue'}        | ${undefined}
+      webPath                                 | gitlabWebUrl           | webUrl                        | expectedHref                            | expectedTarget
+      ${undefined}                            | ${undefined}           | ${`${MOCK_GITLAB_URL}/issue`} | ${`${MOCK_GITLAB_URL}/issue`}           | ${undefined}
+      ${undefined}                            | ${undefined}           | ${'https://jira.com/issue'}   | ${'https://jira.com/issue'}             | ${'_blank'}
+      ${undefined}                            | ${'/gitlab-org/issue'} | ${'https://jira.com/issue'}   | ${'/gitlab-org/issue'}                  | ${undefined}
+      ${'/gitlab-org/gitlab-test/-/issues/1'} | ${undefined}           | ${'https://jira.com/issue'}   | ${'/gitlab-org/gitlab-test/-/issues/1'} | ${undefined}
+      ${'/gitlab-org/gitlab-test/-/issues/1'} | ${'/gitlab-org/issue'} | ${undefined}                  | ${'/gitlab-org/gitlab-test/-/issues/1'} | ${undefined}
+      ${'/gitlab-org/gitlab-test/-/issues/1'} | ${undefined}           | ${undefined}                  | ${'/gitlab-org/gitlab-test/-/issues/1'} | ${undefined}
     `(
-      'renders issuable title correctly when `gitlabWebUrl` is `$gitlabWebUrl` and webUrl is `$webUrl`',
-      async ({ webUrl, gitlabWebUrl, expectedHref, expectedTarget }) => {
+      'renders issuable title correctly when `gitlabWebUrl` is `$gitlabWebUrl`, webUrl is `$webUrl`, and webPath is `$webPath`',
+      async ({ webUrl, gitlabWebUrl, webPath, expectedHref, expectedTarget }) => {
         wrapper = createComponent({
           issuable: {
             ...mockIssuable,
             webUrl,
+            webPath,
             gitlabWebUrl,
           },
         });