Refactor from Vue2 to Vue3 (#20044)

Close #19902

web_src/js/components/DiffFileTree.vue

@@ -1,11 +1,10 @@
 <template>
   <div
-    v-show="fileTreeIsVisible"
-    id="diff-file-tree"
+    v-if="fileTreeIsVisible"
     class="mr-3 mt-3 diff-detail-box"
   >
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <div class="ui list" v-if="fileTreeIsVisible">
+    <div class="ui list">
       <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
     </div>
     <div v-if="isIncomplete" id="diff-too-many-files-stats" class="pt-2">
@@ -117,6 +116,9 @@ export default {
       const [toShow, toHide] = document.querySelectorAll('.diff-toggle-file-tree-button .icon');
       toShow.classList.toggle('hide', visible);  // hide the toShow icon if the tree is visible
       toHide.classList.toggle('hide', !visible); // similarly
+
+      const diffTree = document.getElementById('diff-file-tree');
+      diffTree.classList.toggle('hide', !visible);
     },
     loadMoreData() {
       this.isLoadingNewData = true;