docs: replace ref with shallowRef where it makes sense

Author: johnleider

packages/docs/src/components/api/Inline.vue

@@ -47,7 +47,7 @@
   const route = useRoute()
   const { t, locale } = useI18n()
   const user = useUserStore()
-  const name = ref()
+  const name = shallowRef()
   const sections = ['props', 'slots', 'events', 'exposed'] as const
 
   const components = computed(() => {

packages/docs/src/components/api/PrismCell.vue

@@ -20,7 +20,7 @@
     },
   })
 
-  const html = ref('')
+  const html = shallowRef('')
   watchEffect(async () => {
     html.value = highlight(String(await props.code))
   })

packages/docs/src/components/api/Section.vue

@@ -48,7 +48,7 @@
   })
 
   const store = useLocaleStore()
-  const items = ref()
+  const items = shallowRef()
 
   const TableComponent = computed(() => {
     return {

packages/docs/src/components/api/View.vue

@@ -9,7 +9,7 @@
 
   const route = useRoute()
 
-  const error = ref(false)
+  const error = shallowRef(false)
   const name = computed(() => {
     const name = route.params.name as string
     if (name.endsWith('-directive')) return name.replace('-directive', '')

packages/docs/src/components/app/Markup.vue

@@ -105,10 +105,10 @@
   const user = useUserStore()
   const theme = useTheme()
   const { t } = useI18n()
-  const clicked = ref(false)
+  const clicked = shallowRef(false)
   const root = ref<ComponentPublicInstance>()
 
-  const highlighted = ref('')
+  const highlighted = shallowRef('')
   watchEffect(async () => {
     highlighted.value = props.code && props.language && Prism.highlight(await props.code, Prism.languages[props.language], props.language)
   })

packages/docs/src/components/app/Toc.vue

@@ -132,7 +132,7 @@
   const frontmatter = useFrontmatter()
 
   const activeStack = [] as string[]
-  const activeItem = ref('')
+  const activeItem = shallowRef('')
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {

packages/docs/src/components/app/bar/NotificationsMenu.vue

@@ -131,9 +131,9 @@
   const date = useDate()
   const user = useUserStore()
 
-  const menu = ref(false)
+  const menu = shallowRef(false)
   const all = ref<Notification[]>([])
-  const showArchived = ref(false)
+  const showArchived = shallowRef(false)
 
   const unread = computed(() => all.value.filter(({ slug }) => !user.notifications.read.includes(slug)))
   const read = computed(() => all.value.filter(({ slug }) => user.notifications.read.includes(slug)))

packages/docs/src/components/app/drawer/Drawer.vue

@@ -38,8 +38,8 @@
 
   const { mobile } = useDisplay()
 
-  const rail = ref(user.railDrawer)
-  const _opened = ref([])
+  const rail = shallowRef(user.railDrawer)
+  const _opened = shallowRef([])
   const opened = computed({
     get: () => rail.value ? [] : _opened.value,
     set: val => {

packages/docs/src/components/app/search/SearchDialog.vue

@@ -100,7 +100,7 @@
     'NHT6C0IV19', // docsearch app ID
     'ffa344297924c76b0f4155384aff7ef2' // vuetify API key
   )
-  const searches = ref(JSON.parse(localStorage.getItem('searches') || '[]'))
+  const searches = shallowRef(JSON.parse(localStorage.getItem('searches') || '[]'))
 
   const locale = 'en'
 

packages/docs/src/components/doc/Explorer.vue

@@ -91,7 +91,7 @@
 
   const name = route.params.name?.replace('/', '')
   const pascalName = name ? `${name.charAt(0).toUpperCase()}${camelize(name.slice(1))}` : undefined
-  const model = ref(components.some(v => v.value === name) ? name : pascalName)
+  const model = shallowRef(components.some(v => v.value === name) ? name : pascalName)
 
   const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'options', 'argument', 'modifiers']