Template parsing of ESLint rule for VueJS does not work

The following questions are related to a single issue of the parser not seemingly parsing. Why this is, is unknown, and I’m looking for ways to debug it or get it to work.

What is the correct way to configure eslint.config.js? The documentation shows parser: 'vue-eslint-parser', but in my case got the following error

TypeError: Key “languageOptions”: Key “parser”: Expected object with parse() or parseForESLint() method.

There are other recommendations to use an import instead. What is the proper way?

import exampleRules from './example/eslint-plugin-rules.js'
import vueEslintParser from 'vue-eslint-parser'

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

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

Below is a simplified custom rule and template.

Is there a way to step through, and debug rules in say VSCode? I’d like to see console.log statements or stop at a breakpoint but have not seen anything documented about it.

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.getSourceCode().parserServices.defineTemplateBodyVisitor(context, {
    return {
      'VAttribute[name="class"]' (node) {
        console.log('found VAttribute with class attribute. node:', node)
      },
    }
  }
}

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

Why does create(context) sometimes return an object of methods, and other times return the result from defineTemplateBodyVisitor(context, {}) for template parsing?

Appreciate any answers or advice.