Custom VueJS ESLint rule for parsing section does not work

I have the following config, custom rule, and template:

export default [
  {
    files: ['**/*.{js,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      parser: vueEslintParser,
    },
    plugins: { example: exampleRules },

    rules: {
      'example/warn-something': 'warn',
    }
  }
]

export default {
  meta: {
    type: 'suggestion',  // Can be 'problem', 'suggestion', or 'layout'
    docs: {
      description: 'find a node with attribute class',
      category: 'Best Practices',
      recommended: false,
    },
    fixable: null, // This rule doesn't have an auto-fix.
    schema: [], // No options for this rule.
  },
  create (context) {
    // return context.parserServices.defineTemplateBodyVisitor(context, {
    return {
      'VAttribute[name="class"]' (node) {
        console.log('found VAttribute with class attribute. node:', node)

          context.report({
            node,
            message: 'found VAttribute with class attribute',
          })
      }
    }
  }
}

<template>
  <div :class="['style-dark']"></div>
</template>

The parser does not parse the <template> section. I’d like to find out why 'VAttribute[name="class"]' (node) is not called.

a) Is there a way to set breakpoints and debug rules? I haven’t found anything online about it.

b) Is the parser configured correctly? The docs say to use a string parser: 'vue-eslint-parser', but it errors. Other sources say to use an import parser: vueEslintParser.

c) How to get access to parserServices? I saw this used a few ways but it ends up undefined here.

Any help appreciated.