Text editor won't init inside component popup

Questions
1

Hello,
I believe that I have faced a problem with the text editor component. I have a popup with tabs. text editor toolbar won’t appear.
It is inside component popup > tabs > tab page content
Could you help?
Best regards;

2

Can you please provide a code sample.

3

This is a simplified version of my code, I have tested it and text editor doesn’t init:

<template>

  <div class="popup" id="pub-box">

    <div class="view">

      <div class="page">

        <div class="navbar">

          <div class="navbar-bg"></div>

          <div class="navbar-inner">

            <div class="right">

              <button class="button button-raised button-fill">Publish</button>

            </div>

            <div class="left">

              <a href="#" class="link popup-close icon material-icons">cancel</a>

            </div>

          </div>

        </div>

        <div class="toolbar tabbar toolbar-top">

          <div class="toolbar-inner">

            <a href="#pub-box-post" class="tab-link tab-link-active">

              <li class="icon material-icons">post_add</li>Post

            </a>

            <a href="#pub-box-consult" class="tab-link">

              <li class="icon material-icons">question_answer</li>Consult

            </a>

            <a href="#pub-box-drop" class="tab-link">

              <li class="icon material-icons">pin_drop</li>Drop

            </a>

            <a href="/create-blog/" class="tab-link">

              <li class="icon material-icons">description</li>Blog

            </a>

          </div>

        </div>

        <div class="tabs-animated-wrap">

          <div class="tabs">

            <div id="pub-box-post" class="page-content list tab tab-active" style="overflow-x: clip;">

              <div data-placeholder="write something here" data-hidden-input="#blog_content" class="text-editor text-editor-init text-editor-resizable" data-mode="popover">

                <div class="text-editor-content" contenteditable></div>

              </div>

            </div>

            <div id="pub-box-consult" class="page-content tab">

              <div class="block">

                <p>Tab 2 content</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium

                  voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad

                  laboriosam accusamus?</p>

              </div>

            </div>

            <div id="pub-box-drop" class="page-content tab">

              <div class="block">

                <p>Tab 3 content</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium

                  voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad

                  laboriosam accusamus?</p>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

  export default (props, {

    $,

    $f7,

    $f7ready,

    $update

  }) => {

    return $render;

  }

</script>