这个也有警告，需要修改吗？

  <div id="app" class="demo">
    <custom-layout id="custom-layout" @click="changeValue"></custom-layout>
  </div>
  
   <script src="https://unpkg.com/vue@next"></script>
   <script>
     
   const app = Vue.createApp({});
 
    app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})

   app.mount('#app')
     </script>
  

能运行，但是警告

[Vue warn]: Property "changeValue" was accessed during render but is not defined on instance. 
  at <App>

要重新写这个的函数吗？

多个不显示声明的，更多警告

  <div id="app" class="demo">
    <custom-layout id="custom-layout" @click="changeValue"></custom-layout>
  </div>
  
   <script src="https://unpkg.com/vue@next"></script>
   <script>
     
   const app = Vue.createApp({});
 
    app.component('custom-layout', {
  template: `
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  `
})

   app.mount('#app')
     </script>

[Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <CustomLayout id="custom-layout" onClick=undefined > 
  at <App>

修改后，这个警告消失，但那个警告要不要改呢
以后再回看吧