chore: tweak message

Author: yyx990803

packages/runtime-core/__tests__/components/Suspense.spec.ts

@@ -709,7 +709,7 @@ describe('Suspense', () => {
       <div v-if="errorMessage">{{ errorMessage }}</div>
       <Suspense v-else>
         <div>
-          <Async />     
+          <Async />
         </div>
         <template #fallback>
           <div>fallback</div>
@@ -1250,7 +1250,7 @@ describe('Suspense', () => {
     render(h(Parent), root)
 
     expect(
-      `Component <Child>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. Therefore, this component can't render.`
+      `A component with async setup() must be nested in a <Suspense>`
     ).toHaveBeenWarned()
   })
 })

packages/runtime-core/src/component.ts

@@ -670,7 +670,10 @@ function setupStatefulComponent(
         if (__DEV__ && !instance.suspense) {
           const name = Component.name ?? 'Anonymous'
           warn(
-            `Component <${name}>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. Therefore, this component can't render.`
+            `Component <${name}>: setup function returned a promise, but no ` +
+              `<Suspense> boundary was found in the parent component tree. ` +
+              `A component with async setup() must be nested in a <Suspense> ` +
+              `in order to be rendered.`
           )
         }
       } else if (__DEV__) {