How to use the @nuxt/utils.r function in @nuxt/utils

watchClient () {
    let patterns = [
      r(this.options.srcDir, this.options.dir.layouts),
      r(this.options.srcDir, this.options.dir.middleware)
    ]

    if (this.options.store) {
      patterns.push(r(this.options.srcDir, this.options.dir.store))
    }

    if (this._nuxtPages && !this._defaultPage) {
      patterns.push(r(this.options.srcDir, this.options.dir.pages))
    }

    patterns = patterns.map((path, ...args) => upath.normalizeSafe(this.globPathWithExtensions(path), ...args))

    const refreshFiles = debounce(() => this.generateRoutesAndFiles(), 200)

    // Watch for src Files
    this.createFileWatcher(patterns, ['add', 'unlink'], refreshFiles, this.assignWatcher('files'))

    // Watch for custom provided files
    const customPatterns = uniq([
      ...this.options.build.watch,
      ...Object.values(omit(this.options.build.styleResources, ['options']))
    ]).map(upath.normalizeSafe)

    if (customPatterns.length === 0) {

)
          }
        } else if (this.options.layouts[name]) {
          consola.warn(`Duplicate layout registration, "${name}" has been registered as "${this.options.layouts[name]}"`)
        } else if (!templateVars.layouts[name] || /\.vue$/.test(file)) {
          templateVars.layouts[name] = this.relativeToBuild(
            this.options.srcDir,
            file
          )
        }
      }
    }

    // If no default layout, create its folder and add the default folder
    if (!templateVars.layouts.default) {
      await fsExtra.mkdirp(r(this.options.buildDir, 'layouts'))
      templateFiles.push('layouts/default.vue')
      templateVars.layouts.default = './layouts/default.vue'
    }
  }

this.createFileWatcher(patterns, ['add', 'unlink'], refreshFiles, this.assignWatcher('files'))

    // Watch for custom provided files
    const customPatterns = uniq([
      ...this.options.build.watch,
      ...Object.values(omit(this.options.build.styleResources, ['options']))
    ]).map(upath.normalizeSafe)

    if (customPatterns.length === 0) {
      return
    }

    this.createFileWatcher(customPatterns, ['change'], refreshFiles, this.assignWatcher('custom'))

    // Watch for app/ files
    this.createFileWatcher([r(this.options.srcDir, this.options.dir.app)], ['add', 'change', 'unlink'], refreshFiles, this.assignWatcher('app'))
  }

watchClient () {
    let patterns = [
      r(this.options.srcDir, this.options.dir.layouts),
      r(this.options.srcDir, this.options.dir.middleware)
    ]

    if (this.options.store) {
      patterns.push(r(this.options.srcDir, this.options.dir.store))
    }

    if (this._nuxtPages && !this._defaultPage) {
      patterns.push(r(this.options.srcDir, this.options.dir.pages))
    }

    patterns = patterns.map((path, ...args) => upath.normalizeSafe(this.globPathWithExtensions(path), ...args))

    const refreshFiles = debounce(() => this.generateRoutesAndFiles(), 200)

    // Watch for src Files

let content
        try {
          const templateFunction = template(fileContent, templateOptions)
          content = stripWhitespace(
            templateFunction({
              ...templateVars,
              ...templateFile
            })
          )
        } catch (err) {
          throw new Error(`Could not compile template ${src}: ${err.message}`)
        }

        // Ensure parent dir exits and write file
        const relativePath = r(this.options.buildDir, dst)
        await fsExtra.outputFile(relativePath, content, 'utf8')
      })
    )

templateContext.templateFiles = await Promise.all(templatePaths.map(async (file) => {
      // Use custom file if provided in build.templates[]
      const customTemplateIndex = customTemplateFiles.indexOf(file)
      const customTemplate = customTemplateIndex !== -1 ? this.options.build.templates[customTemplateIndex] : null
      let src = customTemplate ? (customTemplate.src || customTemplate) : r(this.template.dir, file)

      // Allow override templates using a file with same name in ${srcDir}/app
      const customAppFile = path.resolve(this.options.srcDir, this.options.dir.app, file)
      const customAppFileExists = customAppFile.startsWith(appDir) && await fsExtra.exists(customAppFile)
      if (customAppFileExists) {
        src = customAppFile
      }

      return {
        src,
        dst: file,
        custom: Boolean(customAppFileExists || customTemplate),
        options: (customTemplate && customTemplate.options) || {}
      }
    }))
  }

watchClient () {
    let patterns = [
      r(this.options.srcDir, this.options.dir.layouts),
      r(this.options.srcDir, this.options.dir.middleware)
    ]

    if (this.options.store) {
      patterns.push(r(this.options.srcDir, this.options.dir.store))
    }

    if (this._nuxtPages && !this._defaultPage) {
      patterns.push(r(this.options.srcDir, this.options.dir.pages))
    }

    patterns = patterns.map((path, ...args) => upath.normalizeSafe(this.globPathWithExtensions(path), ...args))

    const refreshFiles = debounce(() => this.generateRoutesAndFiles(), 200)

    // Watch for src Files
    this.createFileWatcher(patterns, ['add', 'unlink'], refreshFiles, this.assignWatcher('files'))

watchClient () {
    let patterns = [
      r(this.options.srcDir, this.options.dir.layouts),
      r(this.options.srcDir, this.options.dir.middleware)
    ]

    if (this.options.store) {
      patterns.push(r(this.options.srcDir, this.options.dir.store))
    }

    if (this._nuxtPages && !this._defaultPage) {
      patterns.push(r(this.options.srcDir, this.options.dir.pages))
    }

    patterns = patterns.map((path, ...args) => upath.normalizeSafe(this.globPathWithExtensions(path), ...args))

    const refreshFiles = debounce(() => this.generateRoutesAndFiles(), 200)

    // Watch for src Files
    this.createFileWatcher(patterns, ['add', 'unlink'], refreshFiles, this.assignWatcher('files'))

    // Watch for custom provided files
    const customPatterns = uniq([
      ...this.options.build.watch,