vue.config.js - yaml-loader and i18n not working together

I'm working on vuejs3 project, where I need to load config file written in yaml. This is done by

    config.module
      .rule('yaml')
        .test(/\.ya?ml?$/)
        .use('yaml-loader')
          .loader('yaml-loader')
          .end();
  }

in vue.config.js. Then I want to add translations by using i18n package and want to have separated translations in each .vue file, like

<i18n lang="yaml">
en:
  hello: "hello world!"
ja:
  hello: "こんにちは、世界！"
</i18n>

in yaml format. As suggested I added this block of code to vue.config.js

    config.module
      .rule('i18n')
        .type('javascript/auto')
        .resourceQuery(/blockType=i18n/)
        .use('i18n')
          .loader('@intlify/vue-i18n-loader')
          .end();

but it causes error YAMLParseError: Implicit keys need to be on a single line at line 1, column 1:.

When I remove the translation section <i18n lang="yaml">...</i18n>, there is no error. When I remove the config.module.rule('yaml') ... and loading of .yaml config file, translations works fine. Unfortunately it is not working together.

Thanks for any ideas in advance.