Page Navigation Menus not working with titles that contain {{ content }}

[tlylt]

Tell us about your environment
Windows

• MarkBind Version:
  v.3.1.0
  What did you do? Please include the actual source code causing the issue.
  While working on PR Add documentation on indentation support for components #1719, I decided to turn on the page nav menus for the tips and tricks page and it resulted in the following screenshot:
  

Snippet of the tipsAndTricks.md page below:

{% set title = "Tips & Tricks" %}
<span id="title" class="d-none">{{ title }}</span>

<frontmatter>
  title: "User Guide: {{ title | safe }}"
  layout: userGuide.md
  pageNav: 5
</frontmatter>

# {{ title | safe }}

<span id="escapingCharacters">

##### :fas-lightbulb: Escaping Characters

For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash (`\`) in front of the character.

<include src="codeAndOutput.md" boilerplate >
<variable name="highlightStyle">markdown</variable>
<variable name="code">
\* item 1

* item 1 
</variable>
</span>

<small>More info: [https://www.markdownguide.org/basic-syntax#escaping-characters](https://www.markdownguide.org/basic-syntax#escaping-characters)</small>

</span>

{% raw %}

##### :fas-lightbulb: Using {% raw %}{% endraw %} to display `{{ content }}`


To display the raw variable interpolation syntax using `{% raw %}{% endraw %}`, you would also need to add
the `v-pre` attribute using markdown-it-attrs or as a html attribute.

What did you expect to happen?
I expected the page side nav to show the formatted text of ":fas-lightbulb: Using {% raw %}{% endraw %} to display {{ content }}",

What actually happened? Please include the actual, raw output.
The last part "{{ content }}" disappeared. On the console, it is being rendered as ‎ :

In the console, there is an error message:

The bug example can be viewed at this deploy preview page

[jonahtanjz]

Seems like this is due to Vue treating the double curly braces as text interpolation. Will probably need to process these curly braces in the _collectNavigableHeadings method and wrap them in <span v-pre>{{ content }}</span> to treat it as raw text.

[tlylt]

Seems like this is due to Vue treating the double curly braces as text interpolation. Will probably need to process these curly braces in the _collectNavigableHeadings method and wrap them in <span v-pre>{{ content }}</span> to treat it as raw text.

I see, thanks for the diagnosis! Will put up a fix for this in a while:)