Integration vue component to MDX documentation in storybook 6 without create a story

Question

I'm trying to make that for the component there is a separate playground and documentation (addon-docs 6.4.3) like here: https://consta-uikit.vercel.app/ But mdx doesn't see component in the mdx file. I'm using Vuetify2.6, Storybook6.4. I have already tried adding various packages to my webpack config but it still doesn't want to load the vue component in mdx

// Button.mdx

import { ArgsTable } from '@storybook/addon-docs';
import { Button } from "../Button"

## Example title

<button text="test1"/>

<button text="test2"/>

// Button.stories.js
import Button from "../Button.vue";
import mdx from "./Получается так: Button.mdx";
export default {
  title: "Components/Basic/Button",
  component: Button,
  parameters: {
    docs: {
      page: mdx,
    },
  },
  argTypes: {
    size: {
      control: { type: "select" },
      options: ["S", "L"],
    },
    priority: {
      control: { type: "select" },
      options: ["primary", "outlined_blue", "outlined_red", "minimal"],
    },
    isLoading: {
      control: { type: "boolean" },
    },
    isDisabled: {
      control: { type: "boolean" },
    },
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Button },
  template: '<button @onClick="onClick" v-bind="$props" />',
});

export const Primary = Template.bind({});
Primary.storyName = "Playground";
Primary.args = {
  text: "Button",
  priority: "primary",
};

// .storybook/main.js
const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");

module.exports = {
  core: {
    builder: "webpack5",
  },
  stories: [
    "../../src/**/*// .storybook/main.js
const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");

module.exports = {
  core: {
    builder: "webpack5",
  },
  stories: [
    "../../src/**/*.stories.(js|jsx|mdx)",
    "../../src/**/*.stories.@(js|jsx|mdx)",
  ],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    {
      name: "@storybook/addon-docs",
    },
  ],
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(new VuetifyLoaderPlugin());
    return config;
  },
};.stories.(js|jsx|mdx)",
    "../../src/**/*.stories.@(js|jsx|mdx)",
  ],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    {
      name: "@storybook/addon-docs",
    },
  ],
  webpackFinal: async (config, { configType }) => {
    config.plugins.push(new VuetifyLoaderPlugin());
    return config;
  },
};

It seems like this(click)