Making sure tabTitle updates if the content of a slot updates

Watches and computed props didn't update based on the content of slots.

The render method would still be called when the slot was updated so I moved the update to there. I also just use a method to compute the title because the value would get cached and not updated even if you accessed it more than once.

https://github.com/rancher/dashboard/issues/9822#issuecomment-1976814164

shell/components/TabTitle.vue

@@ -27,10 +27,11 @@ export default {
       default: true
     }
   },
-  computed: {
-    ...mapGetters(['isExplorer', 'currentCluster', 'currentProduct']),
+  computed: { ...mapGetters(['isExplorer', 'currentCluster', 'currentProduct']) },
 
-    title() {
+  methods: {
+    // This isn't a computed prop because it would trigger a recompute when the $slots changed
+    computeTitle() {
       if (!this.$slots.default || this.$slots.default.length !== 1 || this.$slots.default[0].tag || (typeof this.$slots.default[0].text !== 'string')) {
         console.error('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
 
@@ -56,13 +57,9 @@ export default {
       }
 
       return breadcrumb;
-    }
-
-  },
-
-  methods: {
+    },
     updatePageTitle() {
-      updatePageTitle(...this.title);
+      updatePageTitle(...this.computeTitle());
     }
   },
 
@@ -70,12 +67,6 @@ export default {
     this.updatePageTitle();
   },
 
-  watch: {
-    title() {
-      this.updatePageTitle();
-    }
-  },
-
   // Using the render function instead of <template> because <template><slot /></template> will yield a compiler error since
   // <slot /> is not allowed to be a root node of a <template> and I don't want to wrap the child to avoid affecting existing styling
   render() {
@@ -85,6 +76,8 @@ export default {
       });
     }
 
+    this.updatePageTitle();
+
     return this.showChild ? this.$slots.default : null;
   }
 };