Vue 4 динамические компоненты (компоненты), и поддержание активности

<! DOCTYPE HTML > 
< HTML Ланг = "EN" > 
< голова > 
    < мета кодировка = "UTF-8" > 
    < название >动态组件</ название > 
    < сценарий SRC = "JS / vue.js" > </ скрипт > 
< / голова > 
< тело > 
    < DIV ID = "itany" > 
        < кнопка @ Выберите = "флаг =" мой-привет" >
        Кнопка @ Выберите = "В Flag = 'My-мир'" > Показать мир сборки </ Button > 


        < DIV > 
            <! - с помощью Keep-Alive кэш сборок неактивных компонентов, может быть выполнено, чтобы избежать повторного рендеринга, каждый раз по умолчанию уничтожение неактивных компонентов и воссозданной -> 
            < Keep-Alive > 
                < компонент : IS = "Флаг" > </ компонент >     
            </ Keep-Alive > 
        </ DIV > 
    </ DIV > 

    < Script > 
        вар VM = новый новый Vue ({ 
            EL: '#itany '
            Данные: { 
                В Флага: ' My-привет ' 
            }, 
            компоненты: { 
                ' My-привет ' : { 
                    Шаблон: ' <H3> I привет компоненты: {{X}} </ H3> ' , 
                    Data () { 
                        возвращение { 
                            X: math.random () 
                        } 
                    } 
                }, 
                ' мой-мир ' : { 
                    Шаблон: ' мир компоненты <H3> I: {{Y}} </ H3> ' ,
                    Данные () { 
                        возвращение{
                            у: Math.random () 
                        } 
                    } 
                } 
            } 
        });    
    </ Скрипт > 
</ тело > 
</ HTML >