For me, one of the most compelling reasons to use a "template partials" approach in EE (or model-view-viewModel - MVVM - if you prefer) is being able to separate out the presentation of your data (e.g. the html markup) from the business and model logic that retrieves and formats the data (the template tags, conditionals, data formatting and so on). This decoupling of concerns has many advantages, such as the ability to easily change the presentation layer, to re-use layout templates, and to cache the captured data in a structured form and format it after retrieval from the cache.
While your question relates to a specific parse-order issue, I'm going to outline an approach, based on this idea of de-coupling the view and viewModel, which means you won't encounter parse order problems in the first place.
First, work out a common nonemaclature to describe the elements of a page into which you are going to inject content - regardless of where in your page layout(s) they might be used. To avoid collisions, don't use names that you are using for custom fields. E.g.:
{page_title}
{page_description}
{page_body}
{page_aside}
{page_nav_main}
Now work out which blocks of markup are likely to be shared across ALL layouts, and make them snippets.
{sn_head} and {sn_footer} are obvious examples, but as you put your layouts together you'll find many other blocks of markup that can and should be abstracted into snippets to keep things DRY.
{sn_head}
<head><title>{stash:page_title}</title></head>
{sn_footer}
<footer>footer</footer>
Then work out the main page layouts (the 'wrappers') for your site. For example, you might have a layout with a sidebar for internal pages, and one without for the landing page for each of your main sections. Make a /layouts/ folder in your Stash template directory and put these in:
/layouts/landing.html
<!DOCTYPE html>
<html>
{sn_head}
<body>
<h1>{stash:page_title}</h1>
<p class="description">{stash:page_description}</p>
<div class="bodycopy">
{stash:page_body}
</div>
{sn_footer}
</body>
</html>
/layouts/standard.html
<!DOCTYPE html>
<html>
{sn_head}
<body>
<h1>{stash:page_title}</h1>
<p class="description">{stash:page_description}</p>
<div class="bodycopy">
{stash:page_body}
<div class="sidebar">
{stash:page_aside}
</div>
</div>
{sn_footer}
</body>
</html>
(Note that these may not look that different, but what if that changed in the future? Make a template for each layout that has a specific purpose in your site architecture)
You want to minimize or eliminate the passing of markup from your viewModel to your view, so if you have any sub-templates that provide formatting for a particular region of a layout, create a folder for them called 'partials'. E.g., 'sidebar_list' would make a good partial:
/partials/sidebar_list.html
<h2>{stash:aside_title}</h2>
<ul>
{exp:stash:get_list name="aside_list"}
<li>{item_name}</li>
{/exp:stash:get_list}
</ul>
To make use of the layout templates your EE template (the 'ViewModel') needs to grab some data, include the relevant layout and inject sub-templates where needed:
viewModel
{!-- set the page layout --}
{stash:embed:layouts:standard}
{!-- inject the sidebar_list partial into the {stash:aside} region --}
{exp:stash:set_value name="page_aside" value="{exp:stash:embed:partials:sidebar_list}"}
{!-- main page variables --}
{exp:channel:entries limit="1" channel="blog" disable="member_data|pagination" require_entry="yes"}
{sn_set_entry_fields}
{/exp:channel:entries}
{!-- sidebar variables --}
{exp:stash:set name="aside_title"}Categories{/exp:stash:set}
{exp:stash:set_list name="aside_list" parse_tags="yes"}
{exp:channel:categories}
{stash:item_name}{category_name}{/stash:item_name}
{/exp:channel:categories}
{/exp:stash:set_list}
If you have more than one viewModel, you're likely to be repeating the same set code. So encapsulate that as a snippet too:
{sn_set_entry_fields}
{exp:stash:set}
{stash:page_title}{title}{/stash:page_title}
{stash:page_description}{cf_description}{/stash:page_description}
{stash:page_body}{cf_body}{/stash:page_body}
{/exp:stash:set}
