Vue replaces "open" attribute to value "open" in any tag

Why

In HTML spec there are some attributes called boolean attributes. Spec dictates what can be a value of such attribute:

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

open is one of the boolean attributes - it is defined for the <details> element

Problem with Vue 2 is, that it treats most of the boolean attributes as global - without considering the element it is placed on. Result is that open attribute is always rendered with value "open" or removed if the value is falsy (when v-binding). This is fixed in Vue 3 as shown in 2nd example...

How

The use of v-pre is the way to go but unfortunately for you there is a bug.
See this issue. The bug was already fixed with this commit(Sep 21, 2020) but it was not released yet...

1. example - the "With v-pre" should work in Vue version > 2.6.12

   const vm = new Vue({
     el: '#app',
     data() {
       return {
         message: 'Hi!',
         html: `<div open="[" close="]">Hi from html</div>`
       }
     },
   })

   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
   <div id="app">
     <div open="[" close="]">{{ message }}</div>
     <div v-html="html"></div>
     <div v-pre>
       <p open="[" close="]">With v-pre</p>
     </div>
   </div>

2. example - it works in Vue 3 - open is treated as boolean attribute only if placed on <details>

   const app = Vue.createApp({
     data() {
       return {
         message: 'This works in Vue 3!',
       }
     },
   })
   
   app.mount('#app')

   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.global.js" integrity="sha512-1gHWIGJfX0pBsPJHfyoAV4NiZ0wjjE1regXVSwglTejjna0/x/XG8tg+i3ZAsDtuci24LLxW8azhp1+VYE5daw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   
   <div id="app">
     <div open="[" close="]">{{ message }}</div>
     <details open="[">
       <summary>Details</summary>
       open attribute on details element is treated as boolean (renders empty value)
     </details>
   </div>

One workaround is to create a directive (named "attr") that sets the attribute:

Vue.directive('attr', (el, binding) => el.setAttribute(binding.arg, binding.value || ''))

Then use it in your template like v-bind but with v-attr:

<mfenced v-attr:open="'['">

Vue.directive('attr', (el, binding) => el.setAttribute(binding.arg, binding.value || ''))

new Vue({ el: '#app' })

<script src="https://unpkg.com/vue@2.6.12"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>

<div id="app">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>f</mi>
    <mfenced close="]" v-attr:open="'['">
      <mrow><mi>a</mi><mo>,</mo><mi>b</mi></mrow>
    </mfenced>
  </math>
</div>

I've found a simple hack to solve this problem.

Why hack?

Because it is eventually going to be fixed in the comming release as pointed by @Michal, so just a quick & dirty hack is enough for now to go for it.

What I did is I placed the math content in the content and also added it to the data attribute and replacing the original content after vue has done its bad work (sorry just using blade syntax here, but it will make sense). I keep it in both places just for SEO purposes.

The template where I need math expression to be displayed.

...
<div class="proxy-content" data-proxy-content="{{ $article->content }}">
    {!! $article->content !!}
</div>
...

I was using it along with jQuery, but you can easily substitute with vue.js' $el. This is what it looks in my app.js file.

...
const app = new Vue({
    el: '#app',

    methods: {

        proxyContent() {
            // Set Proxy Content.
            jQuery('.proxy-content').each((i, el) => {
                const $el = jQuery(el);
                $el.html( jQuery('<textarea />').html( $el.data('proxy-content')).text() );
            });
        }
        
        loadMathJax() {
            // Load & Initialize MathJax Library.
            const script = document.createElement("script");
            script.type = "text/javascript";
            script.src  = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
            document.getElementsByTagName("head")[0].appendChild(script);
        }

    }

    mounted(){
        // Enable proxy content after mount, so we are sure no more rendering issue for templates.
        this.proxyContent();

        // Load MathJax library with a little delay to make sure everything is ready before loading the library.
        setTimeout(() => this.loadMathJax(), 10);
    }
});
...

One might argue, that I'm mixing up things outside of the scope of the vue application. For me that is not an issue, as the whole page is using vue.js and also the single thing don't make any harm even if there is another scope that is using mathml (though it depends on actual implementation).

In that case, if you want to scope it well, just use $el of vue.