How to use the katex/contrib/auto-render/auto-render function in katex

Vue.directive('katex', (el, binding) => {
			// const displayStyle = binding.arg === 'display';
			// const expression = binding.value.expression ? binding.value.expression : binding.value;
			if (binding.value.expression) {
				if (binding.value.options) {
					renderMathInElement(
						el,
						...binding.value.options,
					);
				} else {
					renderMathInElement(
						el,
					);
				}
			} else {
				// console.log(el);
				renderMathInElement(
					el,
					{
						delimiters: [
							{ left: '$$', right: '$$', display: true },
							{ left: '$', right: '$', display: false },
							{ left: '\\[', right: '\\]', display: true },
							{ left: '\\(', right: '\\)', display: false },
						],
					},
				);

updated: function () {
      // TODO: use smaller scope here
      KatexAutoRender(document.body, {delimiters: [
        {
          left: '$$',
          right: '$$',
          display: false
        }
      ]})
    }
  }

function render (el, binding) {
  let options = {}
  if (binding.value) {
    options = binding.value.options || {}
  }
  Object.assign(options, defaultOptions)
  renderMathInElement(el, options)
}

mounted() {
            if (renderMathInElement) {
                renderMathInElement(this.$refs.content, {
                    delimiters: [
                        {left: "$$", right: "$$", display: true},
                        {left: "\\[", right: "\\]", display: true},
                        {left: "$", right: "$", display: false},
                        {left: "\\(", right: "\\)", display: false}
                    ]
                });
            }
        },
    }

mounted() {
            if (renderMathInElement) {
                renderMathInElement(this.$refs.content, {
                    delimiters: [
                        {left: "$$", right: "$$", display: true},
                        {left: "\\[", right: "\\]", display: true},
                        {left: "$", right: "$", display: false},
                        {left: "\\(", right: "\\)", display: false}
                    ]
                });
            }
        },
    }

const renderMath = (el) => {
  if (!el) return
  renderMathInEl(el, { delimiters: MATH_DELIMITERS })
}